CODEWITHSUNDEEP
cssfirefoxwebkitword-break
kaymes
kaymes

Reputation: 185

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.

Upvotes: 3

Views: 1536

Answers (1)

Stickers
Stickers

Reputation: 78706

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

Upvotes: 5

Related Questions