# 8、word-break、word-wrap、white-space
# white-space
white-space
这个属性是用来控制空白字符的显示,还能控制是否自动换行。
它有5个值 normal | nowrap | pre | pre-wrap | pre-line
- 1、
nowrap:多个空格会被合并,换行符无效,不会自动换行,只有<br/>可以换行。 (空格合并、换行符无效、不自动换行) - 2、
pre-wrap:所有空格都会保留,换行符有效,会自动换行。(空格都会保留、换行符有效、自动换行) - 3、
pre:所有空格都会保留,换行符有效,不会自动换行。(空格都会保留、换行符有效、不自动换行) - 4、
pre-line:多个空格会被合并,换行符有效,会自动换行。(空格会被合并、换行符有效、自动换行)
# word-break
word-break
这个属性是用来控制 单词如何被拆分换行的。
它有3个值 normal | break-all | keep-all
- 1、
normal:浏览器根据自己的规则决定是否换行。 - 2、
break-all:所有单词(包括连续的中文字符、日文、韩文等) 碰到边界一律拆分换行。 - 3、
keep-all:所有单词(包括连续的中文字符、日文、韩文等) 一律不拆分换行。只有空格可以触发自动换行。
# word-wrap
word-wrap 又叫做 overflow-wrap
word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
overflow-wrap 表示当一个不能被分开的字符串太长时,为防止其溢出,浏览器是否允许这样的单词中断换行。
它有2个值 normal | break-word
- 1、
normal:只在允许的断字点换行(例如两个单词之间的空格) - 2、
break-word:只有当一个单词一整行都显示不下时,才会拆分换行该单词。