关于前端:css-overflowwrapwordwrapwordbreakwhitespace-使用总结

示例

除了特地阐明外，文章展现成果均以以下示例作为基底阐明

<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 为代表阐明其作用。

增加款式 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

增加款式 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 用于管制设置如何解决元素内的空白

当 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

共同进步

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