A look at CSS hyphenation in 2019

I recently worked on a web site which used big headlines (as in font-size) and also is available in German. This means there are often rather long words and they often don’t fit in the surrounding container. Without doing anything this would »break« the layout as a horizontal scroll bar would appear. So, I reread an article I wrote almost four years ago about Dealing with long words and implemented the final solution.

This seemed to still work great, but there were some issues with this approach. Let’s have a look at the browser support of CSS Hyphenation, how to use it today and which feature I would like to see in browsers.

Browser support

Support for CSS Hyphenation is pretty good. You should keep in mind that while it works in Chromium-based browsers on Mac & Android platforms it doesn’t work at the moment (January 2019) on Windows and Linux. It also doesn’t work in Opera Mini and some other mobile browsers (Blackberry browser, IE mobile, …), but overall the support is solid.

Update 2021: Hyphenation is now also supported in Chromium on Windows.

Using CSS Hyphenation

To use hyphens today we still need to add prefixes for IE/Edge/Chromium, so it is best to use the following for every text which should use hyphens:

.hyphenate {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

As you probably want to break words and not the layout in unsupported browsers I recommend the following. This way all words will be hyphenated in supported browsers and will break into new lines in unsupported browsers.

.hyphenate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

Now, that we know how to use CSS Hyphenation today, let’s have a look at what’s missing to make it even better.

Too much Hyphenation

The biggest problem we had with Hyphenation was that it simple hyphenates too often. What this means shows the following example, here it hyphenates the word Josef (Joseph), which doesn’t look great. It also makes the text harder to read and therefore a little bit less accessible.

Über Josef Hauser

This is because, unless the UA (user agent) is able to calculate a better value, it is suggested that hyphens: auto means two for before and after, and five for the word total. This means hyphens will be used for every word, which is at least five characters long and it will break after/before a minium of two words.

I am not sure why they came up with this default values, but here we are now having them. There is a solution though already defined in the specification – The hyphenate-limit-chars property.
It specifies the minimum number of characters in a hyphenated word and thus we can use it to override the default value of 5 (word length) 2 (before break) 2 (after break).

So, in theory we could use the following to only use hyphens for words with 10 characters or more and only break before/after after four characters:

hyphenate-limit-chars: 10 4 4;

In reality, this property is still only supported in Internet Explorer 10+ and in Edge with the -ms prefix. It would be really great to get better support for hyphenate-limit-chars – so please let your favorite browser(s) know that you want it – thanks! Here is the issue for Chromium and here for Firefox

Additional note: Webkit-based browsers (Safari) support the -webkit-hyphenate-limit-before, -webkit-hyphenate-limit-after and -webkit-hyphenate-limit-lines properties, which lets you also define the minimum length and the minimum characters before/after a break.

As you can see support for CSS Hyphenation is pretty solid in 2019. The only issue for me is the lack of support for the hyphenate-limit-chars property which will hopefully get better in the future when enough users/developers request it.

Update from 28.01.2018: Added info about similiar properties for webkit-based browser as pointed out by Alexander Rutz and Jiminy Panoz.

Back to top