Firefox内置元素的分词 [英] Firefox word-break for inline elements

问题描述

我正在尝试为某些内联元素（例如< span> ）更改断字符属性和< a> 以获得更好的页面内容流。

I'm trying to change the word-break property for certain inline elements such as <span> and <a> to get a better flow of the page's content.

似乎Firefox仅能识别对于显示为块的元素（例如< div> ），它的word-break属性，而Chrome会接受中断单词的请求。

It seems, that Firefox only recognises the word-break property for elements that are displayed as block (such as <div>), whereas Chrome honours the request to break the words.

在下面的示例中，红色和蓝色部分在Chrome中呈现相同的效果（xxxxx分成几行）。在Firefox中，红色框中的xxxxx溢出。

In the example below, the red and blue parts render identically in Chrome (the xxxxx is broken over several lines). In Firefox, the xxxxx in the red box overflows.

<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/

哪个浏览器是行为正确吗？

Which browser is behaving correctly? Is it a Firefox bug or a Chrome bug?

更重要的是，如何在所有浏览器中达到预期的效果？

And more importantly, how can I achieve the desired effect in all browsers?

注意，将 word-break：break-all 设置为块级是不可行的。

Note, setting word-break:break-all at a block level is not an option.

推荐答案

您可以尝试为Firefox添加额外的 word-wrap：break-word; 。 / p>

You can try adding the extra word-wrap: break-word; for Firefox.

span {
  word-break: break-all; /* for others */
  word-wrap: break-word;  /* for Firefox */
}

如果要保留尽可能在同一行上，您可以在容器上设置 white-space：nowrap; ，并将其重置为 white-space：normal; 在跨度上。同样，这些设置仅适用于Firefox。

If you want to maintain all the text in the same line as much as possible, you can set white-space: nowrap; on the container, and reset it to white-space: normal; on the span. Again, those settings are just for Firefox.

div {
  background: yellow;
  width: 200px;
  white-space: nowrap;
}
span {
  background: aqua;
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
}

<div>
  Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

jsFiddle

jsFiddle

这篇关于Firefox内置元素的分词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！