CSS overflow-wrap新属性值anywhere是干吗用的？

1、先了解下overflow-wrap属性

CSS overflow-wrap属性其实就是之前的word-wrap属性，MDN如今直接把word-wrap的文档页跳转到overflow-wrap属性的文档页了。

因为overflow-wrap属性IE浏览器不支持，而其余现代浏览器依然支持老的word-wrap属性语法，所以，没有任何理由使用overflow-wrap属性。

直到有一天overflow-wrap属性忽然支持了一个新的属性值anywhere，overflow-wrap属性就有了使用的理由了。

overflow-wrap属性的正式语法以下：

overflow-wrap: normal | break-word | anywhere

2、anywhere有什么用

在展开技术属性值anywhere的做用以前，先给你们科普一个概念，关于“硬换行”和“软换行”。

硬换行在文本的换行点处插入了实际换行符，而软换行的文本实际上仍在同一行，但看起来它被分红了几行，例如word-break:break-all让长英文单词就属于软换行。

anywhere和break-word的异同

在正常状态下，anywhere和break-word的表现是同样的，即若是行中没有其余可接受的断点，则能够在任何点断开本来不可断开的字符串（如长单词或URL），而且在断点处不插入连字符。

用人话解释就是连续的英文字符若是能够不用断就不断，若是实在不行，就断开，所以相比break-all可能会留白。以下图所示：

具体可参见这篇文章：“word-break:break-all和word-wrap:break-word的区别”。

下面讲下不一样支持，anywhere和break-word的不一样之处在于，在overflow-wrap:anywhere计算最小内容尺寸的时候会考虑软换行，而overflow-wrap:break-word不会考虑软换行。

例以下面这个例子：

<p class="anywhere">I'm zhangxinxu.</p>
<p class="break-word">I'm zhangxinxu.</p>

p {

display: inline-block;
width: min-content;
padding: 10px;
border: solid deepskyblue;
vertical-align: top;

}
.anywhere {

overflow-wrap: anywhere;

}
.break-word {

overflow-wrap: break-word;

}

结果在Chrome浏览器下的效果就像下图这样：

能够看到，应用了overflow-wrap:anywhere声明的元素的最小宽度是把每个英文单词都破开后的宽度，而应用了overflow-wrap:break-word声明的元素仍是按照默认的最小宽度规则进行计算。

有此可见，overflow-wrap:anywhere就像是overflow-wrap:break-word和word-break:break-all声明的混合体，主要用在弹性布局中，即元素尺寸足够的时候单词尽可能完成显示，不随便中断，若是尺寸不够，那就能断则断。

3、兼容性和结语

overflow-wrap:anywhere声明目前兼容性还不算乐观，目前（2020年3月）Safari浏览器还不支持，Chrome浏览器也是刚刚支持，具体信息参见表：

的兼容性（数据源自MDN）

IE

Edge

Firefox

Chrome

Safari

iOS
Safari

Android
Browser

✘

✘

65+ ✔

80+ ✔

13+ ✘

13.3+ ✘

80+ ✔

所以目前还不适合在实际项目中使用，你们了解便可。

并且，常规的文字排版你们也不会用到这个属性，就算知道这个属性值，也不会想到使用。

注定是一个往后被人遗忘的CSS特性。

就说这么多，带你们简单了解一个新特性。