彻底搞懂CSS文本、空白换行问题

首先，我们来整理一下与换行有关的3个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;
}

 

 

参考资料：

MDN之word-break

MDN之overflow-wrap

MDN之white-space

你真的了解word-wrap和word-break的区别吗？

white-space、word-wrap和word-break的简单整理