参考

word-break 和 word-wrap 的区别 (我以为这篇已经很厉害了)

彻底搞懂word-break、word-wrap、white-space (没想到, 这一篇更厉害)

 

white-space

white-space 是负责管理空格, 换行的, 比如 &nbsp; <br>, \n

默认的行为: 

&nbsp;和<br> 有效

连续的 space 会被缩减成一个

\n 无效

句子超过一行后会自动换行

单个字太长则会超出边界.

大神已经整理很好给我们了: 

 

一般而言, 不需要背起来, 只需要知道默认行为和最常遇到的情况就可以了.

\n 无效是最常遇到的问题. 比如 user 通过 textarea 写了 \n 换行, 后来被弄掉了. 

解决方案就是用 white-space: pre-line

 

word-break

word-break 讲的是单个字要怎样 break. 

默认情况, 英文就是看连续字母一直到空格算一个能被 break 的字. 中文不看空格, 每一个字都可以被 break

break-all

break-all 的情况, 英文的每一个字母都可以被 break. 中文本来就可以啦.

keep-all

keep-all 的情况, 中文变得个英文一样, 只有到空格才能被 break.

2 个都很少会被用到. 因为效果都不太好. 

 

overflow-wrap (word-wrap)

以前叫 word-wrap. CSS 3 后改的, 现在都支持了。

break-word

它的效果就是只有当一个字没办法被 break 又超过了边界时, 才把那个字 break-all. 这才是最长用到的体验.

 

总结

几个东西需要记住

1. 连续 space 会被合并, 所以要连续 space 最好用 &nbsp;

2. \n 无效, 解决方式是用 white-space: pre-line

3. 当遇到 1 个很长的单字时, 用 overflow-wrap: word-wrap 把它 break 掉