Firefox word-break breaks short words at random points

Question

I'm break-wording a container so that extremely long words won't overflow. While Chrome and Safari deal with this really well, it seems that Firefox and IE like to break words randomly - even short words, at the most ridiculous points. See the screenshots below:

enter image description here

Here is the code I'm using to prevent break the words:

.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

This is the the CSS I'm using for the container and the text:

.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}

HTML

   <div class="wrap break-word">
     <div class="row-fluid quotation-marks">&ldquo;&rdquo;</div>
     <span class="quote-text">
       Having a partner definitely allows you to take more risks.
     </span>
     <span class="author">Arianna Huffington</span>
   </div>

Why is this happening? Any clues on how I could get the words to break normally across all browsers? Firefox is definitely a priority.

Thanks in advance!

score 23 · Accepted Answer · answered Jan 07 '13 at 06:41

23

You're doubling up on CSS parameters. Try this..

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

answered Jan 07 '13 at 06:41

Harry

3,301
7
27
33

1

`hyphens: auto;` was enough (for my use-case) – vsync Dec 25 '16 at 20:04
1

This answer needs an update. Doesn't work with current browser versions except Chrome. Browsers not working: Firefox 58.0.2 and Edge 41.16299.15.0 (no word breaking at all) and IE 11.192.16299.0 (breaks words itself when wrap is applicable). – Akerus Feb 12 '18 at 10:55
`hyphens: auto;` on Chrome macOS appears to cause over-eager hyphenation before its needed, in an attempt to keep the paragraph edge smoother I think. Had to remove it to get the 'keep word unless absolutely have to break' behaviour. – Geoff Davids Aug 24 '21 at 18:44

score 4 · Answer 2 · answered Jan 07 '13 at 06:29

I did a temporary fix by changing my break-word code to:

.break-word {
word-break: break-word;
word-wrap: break-word;
}

The words are no longer breaking weirdly. I'm just not sure how safe this is in terms of cross-browser support (as I've only tested with the latest versions of Chrome, Firefox, and Safari)

Apparently hyphenation is only supported with en-US explicitly declared. If anybody has a more valid answer/explanation, I will gladly accept your answer.

score 4 · Answer 3 · answered Jan 07 '13 at 08:57

Remove word-break: break-all. Its meaning is that it creates the exact problem you are describing: the browsers is instructed to break words into pieces at will.

Using word-wrap: break-all is more sensible (or less nonsensical), because it tells a browser to break a word only when there is no other way to make a line fit into the available width. But it, too, violates the rules of English and most other languages: it is incorrect to break a word at an arbitrary point. So take it away, too.

Hyphenation makes much more sense, but it has limited browser support, and for apparent reasons it requires the language of text to be declared (because hyphenation rules are strongly language-dependent). You can use JavaScript-based hyphenation such as Hyphenator.js to deal with browsers that don’t support CSS hyphenation

score 0 · Answer 4 · edited Jul 23 '15 at 05:29

0

word-break:keep-all;

solved the problem for me

edited Jul 23 '15 at 05:29

ketan

19,129
42
60
98

answered Jul 22 '15 at 21:58

rjtkoh

201
3
11

Firefox word-break breaks short words at random points

4 Answers4

Linked