div中文字超长的换行神器：word-break:break-all;

最新推荐文章于 2023-07-10 09:09:21 发布
最新推荐文章于 2023-07-10 09:09:21 发布
阅读量784 收藏
点赞数
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39361809/article/details/77968988
版权

今天想在div中输出一些文字，发现文字多的时候换行是从中文和英文中间换行的。

忽然感觉很神奇！

后来度娘发现一个很神奇的东西：

word-break:break-all;
完美的解决了我的问题。

后来查阅了官方文档：

试了一下，只有break-all能够粗暴的进行换行，I love it.

其他的暂不做追究，还有word-wrap，大家很愿意和word-break进行对比区分。今天我就不继续了，因为要下班啦。哈哈哈~


weixin_39361809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
word-break:break-all和word-wrap:break-word区别总结
12-08
`word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性，它们都有各自的特点和适用场景。 首先，`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...
webfrom-列表文本内容自动换行 word-break-keep-all;word-wrap-n.pdf
08-21
<asp:TemplateColumn HeaderText="OP CREATE USER" HeaderStyle-HorizontalAlign="center"> <HeaderStyle HorizontalAlign=... myDataGrid_d.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");
自动换行
04-22 1764
原文地址：word-wrap同break-word的区别作者：我爱完美 自动换行word-break:break-all和word-wrap:break-word的区别 2007-11-26 15:15 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于： 1，word-break:b
微信消息内容样式 word-break: break-all; word-wrap: break-word; white-space:pre-line;
wqs15192095633的专栏
10-22 879
到最后数字时候最后一个不显示，解决方式是将 white-space:pre-line; 修改为 white-space: pre-wrap;具体这两个内容是什么区别可以百度看下。
word-break:break-all 与word-wrap:break-word的区别
赵乘风_i
04-23 797
word-break:break-allword-wrap:break-word相同之处：都是换行不同：word-wrap :break-word 以单词换行，可能不对齐，会出现空白word-break:break-all 所有都换行，是以div宽度进行换行的，可能会影响单词的完整性如果遇到没有空格全英文，因为没有遇到单词，使用了word-wrap:break-word ，也没有...
实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
anda9128的博客
09-06 286
效果如下： 直接上代码了： 说明：轮播图基于swiper.js，自行下载。css在最后 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
word-break:break-all和break-wrap:break-word的区别
风华正茂
06-30 708
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行 区别在于： word-break词间换行 word-wrap:词后换行 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。 但区
css中强制换行word-break、word-wrap、white-space区别实例说明
12-13
This is all English.</div><div class=c1>全是中文的情况。全是中文的情况。全是中文的情况。</div><div class=c1>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</div>
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
- 注意，`word-wrap`只对英文单词有效，对于中文字符，因为中文本身就具备自动换行的特性，所以不需要这个属性。 总的来说，CSS3的`word-wrap`属性提供了一种有效的方式来处理英文文本的换行问题，使得网页设计更加...
CSS属性display:inline-block用法深入理解
09-25
首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-block`元素的内容会按照块级元素的方式处理，允许设置宽高、内外边距等。...
word-break 设置或检索对象内文本的“字,词”内换行行为。
QUX轻博客
09-14 109
word-break 设置或检索对象内文本的“字,词”内换行行为。 normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。 ...
CSS word-break 详解
最新发布
m0_37616866的博客
07-10 1367
1-2 当前文本是汉字时，遇到标点符号（逗号、顿号、分号、冒号等等），并且下一句汉字的长度 + 当前行的长度 > 1行宽度时，会自动进行换行。1-1 当是字母或数字时，当前行字符遇到空格，并且下一个单词长度 + 当前行的长度 > 1行宽度时，会自动进行换行。
css 文本溢出显示省略号（单行和多行），解决react项目多行文本溢出显示省略号
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
08-13 709
单行 .text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行 .text{ width: 280px; display: -webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 word-break: break-all; text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏
微信小程序文本溢出的处理方法
技术分享
05-10 9381
如果是一行显示的时候，写在view里的样式，会在最后显示省略号，但要是写在text组件中设置这个样式的话就是最后多出来的字隐藏了。.textview{  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap}当然 有单行的省略 就有多行，不过多行的设置的有点复杂：.textview{  display: -webkit-b...
微信小程序css篇---文本溢出
鎏嫣宫守护的博客
12-22 1万+
最为一名Android开发人员，现在无法拖控件写布局真的是一件很麻烦的事啊,所以css样式成为了我做项目的最大隐患，遇到的问题可能做前端的人员看到会觉得很低端，但没办法我还是记录下来吧，多遇到几次就会了，废话不多说，今天遇到的是text一行显示，多的省略----文本溢出的问题。 如果是一行显示的时候，写在view里的样式，会在最后显示省略号，但要是写在text组件中设置这个样式的话就是最后多出来
微信小程序 自动换行
热门推荐
UFO00001的博客
05-31 2万+
微信小程序 自动换行 在wxss中添加 ：  word-break:break-all;  即可
文本自动换行样式word-break: break-all
菜鸟黑一枚
01-17 1万+
未加该 word-break: break-all 样式时，联系地址数据加载完全，但是显示不全。全选复制可以得到所有字符。 加了 word-break: break-all 样式时，联系地址数据加载完全，换行显示出全部字符。   &lt;li class="table-li"&gt; &lt;div class="table-li-name"&gt;职位：&l...
word-break: break-all;
也想快乐的生活
10-30 1149
以下文字来自舜子]的BLOG，转帖一下：今天网友 Dcboy 和我提到一个Bug,他说他的编辑框变形了。后来我看了他的代码发现编辑框没有自动换行。被文章中的英文撑开了。于是我告诉他，让他在skin的CSS里加上 word-break: break-all; 问题解决了。这个问题只有IE才有，我在FF下测试,FF可以自己加滚动条，这样也不影响效果。建议大家做Skin时，记得在body里加 word-
React Native学习笔记
weixin_42342065的博客
06-10 697
1.运行项目的安卓设备： (1)真机 (2)模拟器：官方模拟器(Android Virtual Device)，第三方模拟器：Genymotion、BlueStack。（官方模拟器一般免费、功能比较完整，但性能较差；第三方模拟器一般收费或有广告，但性能较好，常用的是Genymotion） ......
div中文字自动换行
05-24
可以使用CSS中的`word-wrap`和`word-break`属性来实现div中文字自动换行。具体实现方法如下： ```css div { word-wrap: break-word; /* 保证单词不会被截断 */ word-break: break-all; /* 强制进行换行 */ } ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值