Hyphenating with pure CSS

This is more of a print thing, but may come handy sometime on the web also.

Snippet no.1

I’ve seen this snippet circling around the interwebs:

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

But it’s not really working…

Compass to rescue

Not. It’s the exact same thing what Compass outputs when using hyphenation declaration:


.hyphenation-test {
    @include hyphenation;
}

It originates to this article.

Hyphenation looks like this:

screengrab 2013-09-04 at 1.06.36 AM

Kind of breaks all the words.

Something that works

This works for me in Safari and Firefox. Didn’t test it in IE10 cause I don’t have installed at the moment.

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

Tadaa!

screengrab 2013-09-04 at 1.26.50 AM

Aldo a lang="en" tag needs to added to a parent element, usually it’s the html element:

<html lang="en">

This is one of the only things that doesn’t work in Chrome but work in other browser. See the support here.

Club-Mate, the beverage → club-mate.fi