CSS – word-break, overflow-wrap, word-wrap, white-space

参考

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. 这才是最常用到的体验.

当遇到 flex, break-word 失效

参考: Stack Overflow – flex item overflows container due to long word even after using word-wrap

其原因是 flex item 在没有设置 min width 的时候, 最小就是 width 本身. 当设置 min-width: 0 以后, 就会看到 break-word 效果了.

但这招感觉有点 hacking 的味道...

还有一招是用

word-break: break-word;

不过这招当遇到很长很长的字, 它也会 break 掉. 这个体验不一定是想要的.

总结

几个东西需要记住

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

2. 默认 \n 是无效的, 需要加 white-space: pre-line

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

4. 如果不希望自动换行 white-space: nowrap; 或者 pre; 区别是 pre 允许 \n

题外话: 当 inline element 遇上 new line

<p><span>abc</span><span>xyz</span><span>123</span></p>

<p>
  <span>abc</span>
  <span>xyz</span>
  <span>123</span>
</p>

这 2 个 <p> 渲染出来的效果是不一样的

第一个 <p> 间中没有空格

第二个 <p> 中间却有空格, 所以当 inline element 遇上 new line 会变成空格哦. 这个要注意了.