完全搞懂CSS文本、空白换行问题

word-break

该属性决定文本内容超出容器时，浏览器是否自动插入换行符。

属性值：

• normal：默认换行规则——英文以词为单位换行，连续字符不换行，直接溢出父元素
• break-all：无视单词，强制在父元素边缘位置截断（最省空间，看起来最整齐，但单词可能被从中劈开）。另外连续的标点符号不会换行，不知为什么。。。
• keep-all：与normal同样，并且连中日韩的连续文字也不换行了（有空格分隔时会换行）
• *break-word：这不是一个规范属性，只有部分浏览器支持，效果同word-wrap: break-word;

 

word-wrap（overflow-wrap）

该属性决定浏览器是否应该在一个没法正常断开的单词内部插入换行符。

属性值：

• normal：不在单词内部插入换行符，即换行只发生在单词间的空格等地方，不会截断单词。若是单词超级长，则溢出父容器。
• break-word：『若是没有合适的截断点，那就可能在任意位置截断单词』。解释一下：首先尝试正常换行（这一行放不下就放到下一行），若是换行后仍是很长，就在任意位置截断。注：连续的标点符号也会截断。

 

white-space

该属性决定浏览器如何处理空白和换行符。

属性值：

• normal：默认行为，换行符转换为空白，合并连续的空白，但必要时换行（所谓『必要』对于英文来讲，指的是一个单词后面的下一个单词在该行末尾放不下了，得整个放到下一行去；对中文来讲就是天然的换行）
• nowrap：其余与normal同样，但『必要』的换行也不作了，打死不换行
• pre：保留连续的空白，遇到换行符或br标签时换行，但不自动插入换行符
• pre-wrap：保留连续的空白，在遇到换行符、<br>时换行，『必要』时自动插入换行符
• pre-line：合并连续的空白符，在遇到换行符、<br>时换行，『必要』时自动插入换行符

 

对这3个属性的关系，个人理解以下：

首先，white-space决定了浏览器如何渲染换行符，若是它选择无视换行符，那么另外两个属性指导浏览器自动插入的换行符都无效；而它本身插入的换行符不受影响。

其次，word-break优先于word-wrap，由于浏览器首先会把单词视为一个总体。举个例子：

word-break值为normal或keep-all时，可能会有超长的单词溢出容器。此时 word-wrap:break-word 会处理这种状况，将该单词从中间截断，浏览器最终表现出来的效果是break-word。

而若word-break值改为了break-all，那么超长的单词会被强制截断，此时word-wrap就没有用武之地了。浏览器最终表现出来的效果是break-all。

（PS：若是同时设了break-all和break-word，那么一长串标点符号不会换行，缘由不详。。。为了长串标点能正常换行，建议只使用break-word）

 

所以，若是需求是这样的（通常是UGC文本的展现）：

1. 换行符、空白都原样显示

2. 文本正常换行，不能溢出容器

 

那么须要设置的属性组合为：

.text { white-space: pre-wrap; word-wrap: break-word; }