CSS overflow

1、先掌握下overflow-wrap特性

CSS overflow-wrap 特性实际上便是之前的 word-wrap 特性，MDN如今立即把 word-wrap 的文本文档页自动跳转到 overflow-wrap 特性的文本文档页了。

因为 overflow-wrap 特性IE访问器不适用，而别的当代访问器仍然适用老的 word-wrap 特性英语的语法，因而，沒有任何理由应用 overflow-wrap 特性。

直至有1天 overflow-wrap 特性忽然适用了1个新的特性值 anywhere ， overflow-wrap 特性就有了应用的理由了。

overflow-wrap 特性的宣布英语的语法以下：

overflow-wrap: normal | break-word | anywhere

2、anywhere有甚么用

在进行技术性特性值 anywhere 的功效以前，先给大伙儿科普1个定义，有关“硬换行”和“软换行”。

硬换行在文字的换行点处插进了具体换行符，而软换行的文字具体上仍在同1行，但看起来它被分为了几行，比如 word-break:break-all 让长英文单词就属于软换行。

anywhere和break-word的异同

在一切正常情况下， anywhere 和 break-word 的主要表现是1样的，即假如行中沒有别的可接纳的断点，则能够在任何点断掉本来不能断掉的标识符串（如长单词或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 申明现阶段适配性还不算开朗，现阶段（今年3月）Safari访问器还不适用，Chrome访问器也是不久适用，实际信息内容参照表：

因而现阶段还不合适在具体新项目中应用，大伙儿掌握便可。

并且，基本的文本排版大伙儿也不容易用到这个特性，即使了解这个特性值，也不容易想起应用。

注定是1个往后被人忘却的CSS特点。

就说这么多，带大伙儿简易掌握1个新特点。

总结

到此这篇有关CSS overflow-wrap新特性值anywhere 用法大全的文章内容就详细介绍到这了,更多有关CSS overflow-wrap 新特性值anywhere 內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！