由于overflow-wrap属性IE浏览器不支持,而其他现代浏览器依然支持老的word-wrap属性语法,因此,没有任何理由使用overflow-wrap属性。 直到有一天overflow-wrap属性突然支持了一个新的属性值anywhere,overflow-wrap属性就有了使用的理由了。 overflow-wrap属性的正式语法如下: overflow-wrap: normal | break-word | anywhere...
可以看到,应用了overflow-wrap:anywhere声明的元素的最小宽度是把每一个英文单词都破开后的宽度,而应用了overflow-wrap:break-word声明的元素还是按照默认的最小宽度规则进行计算。 有此可见,overflow-wrap:anywhere就像是overflow-wrap:break-word和word-break:break-all声明的混合体,主要用在弹性布局中,即元素尺寸足够...
可以看到,应用了 overflow-wrap:anywhere 声明的元素的最小宽度是把每一个英文单词都破开后的宽度,而应用了 overflow-wrap:break-word 声明的元素还是按照默认的最小宽度规则进行计算。 有此可见, overflow-wrap:anywhere 就像是 overflow-wrap:break-word 和 word-break:break-all 声明的混合体,主要用在弹性布局中...
在项目中遇到这样一个问题,如下图所示,当输入纯数字的时候,文本没有按我们预想的样子去换行,使用了overflow-wrap: break-word后没啥用,查了一下,需要使用overflow-wrap: anywhere; 记录 anywhere和break-word的不同之处在于,在overflow-wrap:anywhere计算最小内容尺寸的时候会考虑软换行,而overflow-wrap:break-word...
overflow-wrap: anywhere; } .break-word { overflow-wrap: break-word; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 结果在Chrome浏览器下的效果就像下图这样: 可以看到,应用了 overflow-wrap:anywhere 声明的元素的最小宽度是把每一个英文单词都破开后的宽度,而应用了 overflow-wrap:break...
可以看到,应用了overflow-wrap:anywhere声明的元素的最小宽度是把每一个英文单词都破开后的宽度,而应用了overflow-wrap:break-word声明的元素还是按照默认的最小宽度规则进行计算。 有此可见,overflow-wrap:anywhere就像是overflow-wrap:break-word和word-break:break-all声明的混合体,主要用在弹性布局中,即元素尺寸足够...
overflow-wrap:anywhere 与 overflow-wrap:break-word 区别 在计算最小内容内在大小时,会考虑由单词换行引入的软换行机会。 例如:当容器宽度由内容决定时,anywhere 会考虑软换行机会从而表现出很小的宽度;break-word 不会考虑软换行的机会,宽度就是最大宽度。 <!DOCTYPE html> Document * { padding: 0; ...
这可能会挤压其他flex项。在这种情况下，anywhere更可能是您想要的。如果这是真的，你不妨这样做：
overflow-wrap: anywhere|initial|break-word|normal|inherit; You might be curious about which are the parameters for the property in CSS overflow wrap? Actually, those are various types of values of overflow wrap which will either prevent or overflow the text inside a border or area. ...
/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; 示例: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <!DOCTYPE html> p { width: 13em; margin: 2px; background: gold; } .ow-break-word { overflow-wrap: break-word; } .word-...