共计 1597 个字符,预计需要花费 4 分钟才能阅读完成。
一、先理解下 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
二、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
申明的混合体,次要用在弹性布局中,即元素尺寸足够的时候单词尽量实现显示,不轻易中断,如果尺寸不够,那就能断则断。
三、兼容性和结语
overflow-wrap:anywhere
申明目前兼容性还不算乐观,目前(2020 年 3 月)Safari 浏览器还不反对,Chrome 浏览器也是刚刚反对,具体信息参见表:
的兼容性(数据源自 MDN)
IE
Edge
Firefox
Chrome
Safari
iOS
Safari
Android
Browser
✘
✘
65+ ✔
80+ ✔
13+ ✘
13.3+ ✘
80+ ✔
因而目前还不适宜在理论我的项目中应用,大家理解即可。
而且,惯例的文字排版大家也不会用到这个属性,就算晓得这个属性值,也不会想到应用。
注定是一个日后被人忘记的 CSS 个性。
就说这么多,带大家简略理解一个新个性。