本文介绍了Firefox内置元素的分词的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试为某些内联元素(例如< 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>

上面的示例:

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

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

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

07-24 11:01