CSS文本：空白与换行的处理

white-space

---

white-space 属性设置如何处理元素中的空白。

 

属性值

 

normal
连续的空白符会被合并，换行符会被当作空白符来处理。填充 line 盒子时，必要的话会换行。
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充 line 盒子时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充 line 盒子时会换行。

 

下面的表格总结了各种 white-space 值的行为：

	换行符	空格和制表符	文字转行
normal	合并	合并	转行
nowrap	合并	合并	不转行
pre	保留	保留	不转行
pre-wrap	保留	保留	转行
pre-line	保留	合并	转行

 

word-break

---

word-break 属性指定怎样在单词内断行。

 

 

属性值

 

normal
使用默认的断行规则。长 non-CJK 文本不断行，CJK 文本可任意断行。
break-all
对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-CJK 文本表现同 normal。

 

word-wrap

---

 

属性值

 

normal
只在允许的断字点换行。
break-word
尽量在可换行的位置换行。实在没办法也就只能在原本不允许的长文本内部换行。

 

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