CSS3中的word-wrap和word-break
twocode

    在博文中遇到的问题就是对于英文的句子或者是单词来说,有时候需要特殊的处理一下。

    多数是需要进行换行的处理,而换行涉及到了两个CSS3的属性:word-wrap和word-break,经过个人测试,说说他们的区别:

    首先这两属性都不设置的话默认值:word-wrap:normal|word-break:normal,浏览器不会为了换行而将单词截断,所以默认情况下,浏览器以保证单词的完整性为第一要务,及时一个单词超过正常行的字符数也不会换行,实例:

   有一单词aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa,超过了容器的宽度,他会显示而且是溢出显示,当然极端的例子只是为了说明我要表达的重点;

moren.png

    设置word-wrap:break-word;效果就是在保证单词的完整性(单词能不拆旧不拆)的前提下,若超过正常行的字符数进行换行,实例:

    aaaaaaaaaaaaaaaaaaaaaaaaa

    aaaaaaaaaaaaaaaaaaaaaaaaa

word-wrap.png

设置word-break:break-all,效果就是优先考虑节省空间,不考虑单词的完整性,实例:

word.png

     


网友评论已关闭