Search code examples
cssfirefoxline-breaksword-break

No consistent word-breaking in Firefox


Please take a look in Firefox at the development site here.

The same phrase "Accountantskantoor verschaeren-mertens" is shown twice, once in the sidebar and once in the upper right corner. As you can see the line breaks at different positions. I've tested in Chrome, IE and Firefox and this only occurs in Firefox.

Any thought on how to make it consistent? I've tried the following but it didn't work.

word-break: normal;

Solution

  • This is rather mysterious, because Firefox is clearly hyphenating the text in the upper right corner: there is a hyphen at the end of first line, indicating word division made. It’s not something that word-break would cause (it brutally breaks strings instead of proper word divisioon).

    Yet there is nothing that suggests hyphenation in the code, unless I’m missing something.

    But setting the following on the element prevents Firefox from hyphenating:

    -moz-hyphens: manual
    

    Presumably Firefox now has some defaults that cause automatic hyphenation in some situations (possibly -moz-hyphens: auto with some fancy selector). And since Firefox still does not use hyphens as the property name, the vendor-prefixed property needs to be used.

    Setting the value to manual allows a break after a hyphen as well as the effect of soft hyphens. To disallow even them, use the value none instead.