css - overflow-wrap、word-wrap、word-break、white-space 使用总结

示例

除了特别说明外，文章展示效果均以以下示例作为基底说明

<style>
    div {
      width: 80px;
      background: yellowgreen;
    }
</style>
<div>
    nice ojbkkkkkkkk aa
</div>

效果：

可以看到在默认情况下，有两个比较需要注意的地方
1、在一行内，当最后一个单词无法完整放下，这个单词会放到下一行去
2、在一行内，如果只有一个单词，且该单词的长度已经超过容器的长度，单词末尾部分的字母只会溢出容器，而不会放到下一行

这两种现象有时候并不是我们想要的，特别是第二种现象

overflow-wrap、word-wrap

两者效果等同，只不过 overflow-wrap 是 CSS3 里的属性，用来取代 word-wrap，但在开发时，为了兼容性，应该都写上两者。文章均以 overflow-wrap 为代表说明其作用。

值	描述
normal	只允许在断字点换行，默认值
break-word	允许在长单词或 URL 地址内部进行换行

添加样式 overflow-wrap: break-word

<style>
    div {
      width: 80px;
      background: yellowgreen;
      overflow-wrap: break-word;
    }
</style>

效果：

1、由于 nice 后面搭配了 ojbk（后面的k省略说明）会让 ojbk 难以完整与 nice 同行，所以 nice 后面直接换行，让 ojbk 显示在下一行。
2、ojbk 的宽度本来就大于容器的宽度，后面的 k 只能显示到下一行
3、aa 可以完整放到第三行

得到结论：
overflow-wrap: break-word 的作用
1、若行内的最后的一个单词如果无法完整放下，则直接将整个单词放到下一行
2、若这个单词的宽度大于容器的宽度，则将多余的字母放到下一行

word-break

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

添加样式 word-break: break-all

<style>
    div {
      width: 80px;
      background: yellowgreen;
      overflow-wrap: break-word; // 这个可不写
      word-break: break-all;
    }
</style>

效果：

可以看到 nice 和 ojbk 是同行，而 ojbk 多出的字母部分放到第二行
得到结论：
word-break: break-all 的作用
1、若行内的最后一个单词无法完整放下，则多余的字母放到下一行

当 word-break 值为 keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。
由于这里要更换 CJK 语言，因此用新例子展示效果

<style>
    div {
      width: 80px;
      background: yellowgreen;
    }
</style>
<div>
    我你他，我你他
</div>

可以看到在默认情况下，就有 word-break: break-all 的类似效果，实际上 word-break: break-all 和 overflow-wrap: break-word 是针对非 CJK 语言，word-break: keep-all 是针对 CJK 语言。

添加样式 word-break: keep-all

<style>
    div {
      width: 80px;
      background: yellowgreen;
      word-break: keep-all;
    }
</style>

逗号后面直接换行，第二个的“我你他”被放到了第二行
得到结论：
break-word: keep-all 的作用
1、断句的标准是根据标点符号来进行，效果与 overflow-wrap: break-word 类似，只是针对的语言不同

overflow-wrap 和 word-break 的优先级

虽然在标准上的定义，overflow-wrap 是控制是否允许断句，而 word-break 是控制怎样断句，但上述例子很明显，overflow-wrap 也有断句作用。

那么两者的优先级是怎样的？我们先看下以下实践情况。
1、在 word-break 非 break-all 的情况下，overflow-wrap: break-word 才会起到自身的断句作用。
2、在 word-break 为 break-all 的情况下，overflow-wrap: break-word 不会起到自身的断句作用。
3、word-break: keep-all 只针对 CJK 语言，不在讨论范围内
也即是说针对非 CJK 语言， word-break 的断句作用优先级大于 overflow-wrap

white-space

white-space 用于控制设置如何处理元素内的空白

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

当 white-space 设置了 nowrap，overflow-wrap 和 word-break 就没有任何用处了，因为文本被强制显示为一行了。

总结

overflow-wrap(word-wrap) 和 word-break 都可以起到断句作用，对于非 CJK 语言的断句，word-break 的优先级更高。

是不是有人和我一样疑惑，为什么不直接在 word-break 定义一个可以起到 overflow-wrap: break-word 效果的新属性值？overflow-wrap 属性是不是多此一举？相信很多人都被这两个属性搞得头晕眼花。
很奇怪的是，明明在标准上，word-break 只有三个属性值，在 chrome 里输入时发现有 break-word 值，而且该效果和 overflow: break-word 效果一样。

而且为什么 CJK 语言的断句作用和非 CJK 语言的断句作用放到同一个属性（word-break）里面，若设置了word-break: keep-all，那不就无法同时设置 word-break: break-all ？CJK 语言和非 CJK 语言不应该产生冲突。

没有深究这两个问题，也许上述的问题都是历史遗留下来。

参考

https://www.cnblogs.com/yingz...
https://www.jianshu.com/p/53d

共同进步

欢迎大家点赞、关注、收藏、分享
若文章有错漏，请各位在评论区指正
ฅ(`･ω･´)ฅ