关于 CSS 的英文单词换行 (word-break 和 word-wrap 的区别)

转载自 AlloyTeam：http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/

🧙‍♀️ 问：如何强制（自动）中、英文换行与不换行？

👩‍🎓 答：

1. word-break:break-all; 只对英文起作用，以字母作为换行依据。
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据。
3. white-space:pre-wrap; 只对中文起作用，强制换行。
4. white-space:nowrap; 强制不换行，都起作用。
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）。

🍌 word-break

word-break: normal | break-all | keep-all;

• normal：使用浏览器默认的换行规则。
• break-all：允许在单词内换行。
• keep-all：只能在半角空格或连字符处换行。

word-break：当行尾放不下一个单词时，决定单词内部该怎么摆放。

• break-all: 强行上，挤不下的话剩下的就换下一行显示。霸道型。
• keep-all: 放不下我了，那我就另起一行展示，再放不下，我也不退缩。傲骄型。

🍊 word-wrap

word-wrap: normal | break-word;

• normal：只在允许的断字点换行（浏览器保持默认处理）。
• break-word：在长单词或 URL 地址内部进行换行。

word-wrap：当行尾放不下时，决定单词内是否允许换行。

• normal: 单词太长，换行显示，再超过一行就溢出显示。
• break-word: 当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行。

🍇 white-space

空格转换。

white-space: normal | nowrap | pre | pre-wrap | pre-line;

pre 是 preserve(保留)的缩写，跟保留空格有关系。

• pre：保留所有的空格和回车，且不允许折行。
• pre-wrap：保留所有的空格和回车，但是允许折行。
• pre-line：会合并空格，且允许折行。

🍑 富文本里的 html 标签之间有空格

既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻就可以了。

□ --> □ 
□□ --> □  
□□□ --> □ □ 
□□□□ --> □ □  

自动规避了浏览器的合并空格策略。

---

总结

1. word-wrap：决定句尾放不下单词时，单词是否换行。
2. word-break：决定单词内该怎么换行。
3. 平文本可以配合 white-space: pre-wrap 来解决多空格压缩显示问题。
4. 富文本采用的解决方案是对空格进行间隔 html 转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。