clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Hyphenating with pure CSS

Filed under: HTML/CSS— Tagged with: css, hyphenation, word-break

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

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;
}

here’s an example how that might look like:

Also, a lang="en" tag needs to added to a parent element, usually in the html (root) tag:

<html lang="en"></html>

See browser support here at caniuse.com.

Snippet no.1

Below this line it’s just old stuff that doesn’t matter anymore. Kept for posterity.

I’ve seen this snippet circling around the internet:

.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:

Kind of breaks all the words.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.