CSS3设置内容超过一定长度后自动折行

最新推荐文章于 2023-07-03 17:53:00 发布
最新推荐文章于 2023-07-03 17:53:00 发布
阅读量607 收藏
点赞数
文章标签： 数据库

　　

　　在用编辑器保存的数据到数据库的时候经常是在我们的内容前后加一个P标签，但是出来之后是一行，有时候会超过边框的宽度，所以研究了如何折行,如下代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div style="width:400px;background-color: #dcdcdc;height: auto;">
            111111111111111111111111111111111222222222222222222223333333333
        </div>
        <br>
        <br>
        <br>
        <div style="width:400px;background-color: #dcdcdc;height: auto; word-wrap:break-word; word-break:break-all;overflow: hidden;">
            111111111111111111111111111111111222222222222222222223333333333
        </div>
    </body>

</html>

 

 

效果:

 

 解释:

overflow 属性规定当内容溢出元素框时发生的事情。

 

 

word-break:

 

 word-wrap 属性允许长单词或 URL 地址换行到下一行。

 

weixin_33725270
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5C3 css3实现div 模拟Input框 应用场景：输入地址的输入框 不用textarea的情况下（输入框超过宽度自动换行）
sally18的博客
07-29 1771
<!DOCTYPE html> <html> <head> <title>css3 语法实现div模拟Input</title> <style type="text/css"> /* div模拟输入框*/ .imitate-input{ ...
css3 实现多行文本折行
09-29 220
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>t1</title> <style> p {display:-webkit-box; -webkit-box-...
css 折行
逆风的蔷薇
03-26 725
style=\"word-wrap:break-word;width:200px;\"
css3-11 如何让html中的不规则单词折行
weixin_34336292的博客
07-04 92
css3-11 如何让html中的不规则单词折行 一、总结 一句话总结：用word-wrap属性：word-wrap:break-word;   1、word-break和word-wrap的区别？ 推荐word-wrap， word-break：所有单词只要范围不够一律折行 word-wrap：不规则单词折行，规则单词不折行 不好记得话看各自的属性值就知道了 15 ...
css 超出文本换行
weixin_38942717的博客
07-03 1万+
转载自 片段社区 text-align: justify; text-justify: newspaper; word-break: break-all;
CSS长文本折行与不折行
lzxiall的专栏
11-22 1801
white-space 属性设置如何处理元素内的空白。 p{white-space:nowrap;}
CSS3 自动换行
bestlove12345的博客
07-07 2230
CSS3 自动换行 css如何实现自动换行   下面是 CSS 代码： 简单实例： 允许对长单词进行拆分，并换行到下一行： p {word-wrap:break-word;} 复制代码 下面是产字符换行的  完整示例：   p.test { width:11em;  bo
记录--多行标签超出展开折叠功能
最新发布
林恒的博客
07-03 536
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言  记录分享每一个日常开发项目中的实用小知识，不整那些虚头巴脑的框架理论与原理，之前分享过抽奖功能、签字功能等，有兴趣的可以看看本人以前的分享。  今天要分享的实用小知识是最近项目中遇到的标签相关的功能，我不知道叫啥，姑且称之为【多行标签展开隐藏】功能吧，类似于多行文本展开折叠功能，如果超过最大行数则显示展开隐藏按钮，如果不...
css文字处理（溢出、折行）
y1238r的博客
08-19 5597
css，文字单行省略、多行省略，文字折行写法
div设置超出宽度自动换行
分享--------留住生活
10-26 1万+
div内容超出宽度自动换行，设置宽度之后，再设置word-break、word-wrap这两个属性即可。如果div里面的内容自动换行后，两行距离过远，可以设置line-height属性，控制行高。 div{ width: 500px; /** word-break: normal(使用浏览器默认的换行规则)|break-all(允许在西文单词中换行)|keep-all(只能在半...
css样式控制tr中文字超出后折行显示
馨新欣心
03-22 1796
style="max-width: 50px; word-break: break-all ; word-wrap: break-word" 就是这么简单，哈哈！
css文本超出换行
热门推荐
全易
09-18 1万+
先是这样的： 添加：**word-wrap: break-word**后 兼容性：
CSS3让文本自动换行——word-break属性
weixin_33795743的博客
09-03 280
1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能。 2.指定自动换行的处理方法 在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。 div{ word-break:break-all; } word-break属性可以使用的值 值 换行规则 IE5以上 Safari与Chrome normal 使用浏览...
css文本超出 自动换行
shuai1999m的博客
03-13 1万+
.card-item { width: 32%; font-size:28upx; word-break: break-word;//文本超出 自动换行 }
文本超过指定行数折叠
携手天下
11-18 1261
多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。 组件可以通过npm安装使用，需要的同学可以尝试一下： 组件地址：https://github.com/Lushenggang/vue-overflow-ellipsis 在线体验：https://wintc.top/laboratory/#/ellipsis ...
多种类型文本超出隐藏问题
weixin_36430673的博客
09-27 264
如何实现文件禁止折行，超过部分用省略号隐藏？ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 强制不换行，超出部分隐藏且以省略号形式出现 white-space 属性设置如何处理元素内的空白 normal默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 ...
css 固定宽度，自动换行
weixin_34416754的博客
11-29 806
max-width: 200px; display: block; word-break: break-all；
css 长字符串自动换行
JackLiu16的博客
08-20 3762
参考：https://www.cnblogs.com/luyingying/p/5144219.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值