Firefox word-break for inline elements

问题

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.

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.

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>

Example from above: 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?

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

回答1:

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

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

来源：https://stackoverflow.com/questions/38149536/firefox-word-break-for-inline-elements

标签

css

firefox

webkit

word-break