word-break:break-all和word-wrap:break-word的区别

最新推荐文章于 2024-08-12 15:57:18 发布
最新推荐文章于 2024-08-12 15:57:18 发布
阅读量5.2k 收藏 10
点赞数 2
分类专栏： 前端 文章标签： css word-break word-wrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yesyoucan_/article/details/85247881
版权

word-break:break-all和word-wrap:break-word的区别：

word-break:break-all正如其名字，所有的都换行。毫不留情，一点空隙都不放过。

而word-wrap:break-word则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。

点我看样例链接

运行结果：
在这里插入图片描述

引用链接：
https://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/

yesyoucan_
关注
专栏目录
word-break: break-all VS word-wrap: break-word
liuhao9999的博客
07-26 487
在一个宽度有限的容器中显示了一个字符串，例如它最多可以显示9个字符。将尝试在每行中容纳最大字符数。所以有些单词被分成不同的行，例如。是一个非标准且无前缀的Microsoft扩展。浏览器可能会在意想不到的地方打断长文本。为了防止这种行为，HTML5提供了该。在每个路径分隔符()之前使用元素。不会破坏能够适合每一行的单词。如果每行可以包含较少数量的字符，请注意，IE11及更早版本。，用于指定将创建换行符的位置。则将破坏每行不适合的长单词。单词不会分成不同的行。......
word-break:break-all和word-wrap:break-word区别总结
12-08
`word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性，它们都有各自的特点和适用场景。 首先，`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...
CSS网站实用技巧：word-wrap同word-break的区别
weixin_30408675的博客
11-14 154
兼容 IE 和 FF 的换行 CSS 推荐样式 　　最好的方式是 　　word-wrap:break-word; overflow:hidden; 　　而不是 　　word-wrap:break-word; word-break:break-all; 　　也不是 　　word-wrap:break-word; overflow:auto; 　　在 IE 下没有任何问题，在 FF 下，...
CSS笔记
最新发布
2201_76100326的博客
08-12 1768
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
word-break:break-all和 word-wrap:break-word区别
南极光经验分享
04-12 683
  查看文章     自动换行word-break:break-all和word-wrap:break-word的区别2007-11-26 15:15
css自动换行(转载)
weixin_30627341的博客
10-10 710
自动换行 word-break:break-all和word-wrap:break-word word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于： 1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulatio...
word-break:break-all；与word-wrap:break-word的区别
weixin_53961451的博客
04-18 511
word-break:break-all;与word-wrap:break-word的区别 当一个单词长度超过容器宽度时，一般会超出容器，不换行。如 <div class="a"> honorificabilitudinitatibus </div> css: .a{ width: 100px; background: red; color: #fff;
浅析word-break work-wrap的区别
12-13
语法：word-break: normal|break-all|keep-all; 默认值 normal 继承性 yes 版本 css3 Javascript语法 object.style.wordBreak="keep-all"   值 描述 normal 使用浏览器默认的换行规则。 break-...
CSS word-wrap同word-break的区别
12-11
兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何...
css中强制换行word-break、word-wrap、white-space区别实例说明
09-25
CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似，但它们在处理文本换行的细节上有所不同，下面将详细...
word-break: break-all;
也想快乐的生活
10-30 1157
以下文字来自舜子]的BLOG，转帖一下：今天网友 Dcboy 和我提到一个Bug,他说他的编辑框变形了。后来我看了他的代码发现编辑框没有自动换行。被文章中的英文撑开了。于是我告诉他，让他在skin的CSS里加上 word-break: break-all; 问题解决了。这个问题只有IE才有，我在FF下测试,FF可以自己加滚动条，这样也不影响效果。建议大家做Skin时，记得在body里加 word-
word-wrap: break-word word-break: break-all;
weixin_30858241的博客
05-04 116
word-break: break-word;根据空格断词处理,超过换行 word-wrap: break-word;根据空格断词处理,超过换行 word-break: break-all;不根据空格断词处理，超过长度强行换行 word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all word-wrap（overfl...
word-break
weixin_36909758的博客
05-13 648
【题目描述】Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words. For example, given s =“leetcode”, dict =[“leet”,...
关于word-break: break-all;
锋宇同舟的专栏
04-01 3882
对于XML文件，当我们向其中加入长的英文文本时，会出现显示不全的情况。主要原因是IE不能自动换行。 解决办法是：在xsl样式表中加入word-break: break-all; 如:  word-break的说明, 注意word-break 是IE5+专有属性语法： word-break : normal | break-all | keep
HTML属性word-break:break-all
LHX_ldm的博客
05-30 1万+
word-break:break-all和word-wrap:break-word的区别 word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行， 看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词 挪到下一行，而是直接进...
CSS英文字符串换行（word-break: break-all 或者 word-wrap）
热门推荐
黄彪博客
01-28 2万+
文章参考 英文强制换行css 使用css强制英文单词断行代码 问题描述 在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)’，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug 解决过程 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于
break-word;
骆天一
10-26 552
break-word;
word-break:break-word
qq_46490956的博客
07-18 301
word-break:break-word
自动换行word-break:break-all和word-wrap:break-word的区别
xiaoyatou_00的专栏
01-12 663
<br />word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。<br />它们的区别就在于：<br />1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。<br />2，
white-space: pre-wrap;word-break: break-all;
03-29
The property "word-break: break-all;" breaks words when they exceed the container width. Together, these properties allow text to wrap and break at any point, including within words, while still ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值