I haven't been posting anything lately. Although I begann writing on another topic, I didn't have the time to finish it yet. So I will just publish this small post in between. This post deals with an enhanced css-only hyphen solution, based on a solution, which was posted on css-tricks.com.

Lately when developing any website-frontends I often ran into the problem that words don't fit the screen width on mobile devices, due to the fact, that there are very long words existing in the german language. I remembered, that some years ago there was a javascript-base solution for hyphenating words. However at that time I thought - and still think - that this is kinda overkill and would have beend pleased if there was a css-only solution.

Now digging back into the topic, I encountered a nice post published at css-tricks.com: hyphens.

I used the code-snippet (assuming it was working) in two of my projects. Just until now, when client complained about a cut word in IE where it wasn't really necessary. In fact it was the the year 2014 which had been cut in 2|014. But why? So begann testing around with the snippet and different properties. Since the client is using IE (yeah, I know we are in 2016 and not 2007 anymore...) I had to fix it also in IE to make them feel satisfied.

This is what css-tricks.com suggests:

.hyphenate {
    -ms-word-break: break-all;
    word-break: break-all;

    // Non standard for webkit
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Great - however browsers which support the word-break-property and the hyphens-property (or versions with vendor prefixes), would rather use the word-break-property instead of the hyphens-property, which leads to broken words without displaying any hyphens even though the browser would be capable of doing so.

So I modified the snippet to use CSS' @supports-query which looks like this:

.hyphenate  {
    word-break: break-all;
    word-break: break-word;
}

@supports (
    (hyphens: auto) or
    (-webkit-hyphens: auto) or
    (-moz-hyphens: auto)
) {
    .hyphenate  {
        word-break: normal;
        word-break: normal;

        hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
    }
}

First we set the word-break-properties, but when the browser supports the hyphens-property (or vendor prefixed versions) we reset the word-break-property and use hyphens instead.

And now the Final Boss comes into play: Internet Explorer... Even Internet Explorer 11 doesn't support the @supports-query, but understands the -ms--prefix for word-break and hyphens. If we put it into the correct order it will override the non prefixed versions of both properties, like so:

.hyphenate  {
    word-break: break-all;
    word-break: break-word;
    -ms-word-break: normal;
    -ms-hyphens: auto;

}

@supports (
    (hyphens: auto) or
    (-webkit-hyphens: auto) or
    (-moz-hyphens: auto)
) {
    .hyphenate  {
        word-break: normal;
        word-break: normal;

        hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
    }
}

Related links