word-wrap和word-break的区别

虽然word-wrap和word-break这两个css的属性我很早就用了,但是也仅仅只是知道把它们拿过来就可以实现给单词进行断句,之前只是模糊的觉得一个会换行一个不会换行,今天在网上看到一篇《你真的了解word-wrap和word-break的区别吗》的文章,才发现之前我的理解略有偏差,非常感谢作者的经验分享。

(1)word-wrap:break-word;

word-wrap:break-word使用示例

图1:word-wrap:break-word使用示例

word-wrap属性用来给长单词进行断句,当一个单词要求显示的长度大于给定空间的长度,那么该单词就会先换行,然后显示,若单词的长度比第二行整行的长度还长时,那么超过的部分就会自动断词到另一行去显示。

(2)word-break:break-all;

word-break:break-all使用示例

图2:word-break:break-all使用示例

word-break属性也是用来给长单词进行断句,当一个单词要求显示的长度大于给定空间的长度时,那么该单词超出部分就开始断句,换行显示超出部分,word-break与word-wrap的区别就是word-break不会先另起一行输出单词,而是直接就开始断词。

注意,当没有使用上面两个CSS属性的时候,浏览器默认的也是当单词过长时,换行输出显示,在写代码的时候,还是应该酌情考虑选择哪种显示方式。

本文标题:word-wrap和word-break的区别

本文链接:http://yedward.net/?id=177

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章