我正在尝试更改word-break
某些内联元素的属性,例如<span>
并<a>
获得更好的页面内容流。
看起来,Firefox 只识别显示为块(例如<div>
)的元素的分词属性,而 Chrome 尊重分词的请求。
在下面的示例中,红色和蓝色部分在 Chrome 中呈现相同(xxxxx 被分成几行)。在 Firefox 中,红框中的 xxxxx 溢出。
<div style="width:200px;background:red;">
Hello <span style="word-break:break-all;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>
<div style="width:200px;background:blue;word-break:break-all;">
Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>
上例:https ://jsfiddle.net/7scx4hfq/
哪个浏览器的行为正确?是 Firefox 错误还是 Chrome 错误?
更重要的是,如何在所有浏览器中达到预期的效果?
请注意,word-break:break-all
不能在块级别进行设置。