How to use automatic CSS hyphens with `word-break: break-all`?

css word-break
chovy picture chovy · Mar 7, 2013 · Viewed 46.8k times · Source

I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example.

Such that the text would look like this:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

I created a JSFiddle too.

This needs to work in IE9/IE10, but it'd be nice if it'd work in Firefox and Chrome as well.

Answer

Jukka K. Korpela picture Jukka K. Korpela · Mar 7, 2013

The word-break property and hyphenation are two completely different things. The first one, originally intended for East Asian languages mainly, does bad things to languages like English: it arbitr arily cuts w ords at some poi nts without ind icating that a word has been broke n.

So you should decide whether you have an expression where a line break can be inserted by a browser at any point or whether you want hyphenation.

For hyphenation, the CSS code as such is OK, though many people would advice putting the standard property setting hyphens: auto last, after prefixed properties. But it requires that the language of the text be declared in HTML markup, using e.g. <div lang=en>. Moreover, browser support is still limited: IE 9 does not support such hyphenation, and the support in IE 10 covers a relatively small set of languages (including English of course).

For automatic hyphenation on IE 9, you would need to use either server-side programmed hyphenation or, simpler, client-side hyphenation with tools like Hyphenator.js.

Related questions

Difference between overflow-wrap and word-break?

What´s the exact difference between overflow-wrap/word-wrap and word-break? And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap but it doesn't look …

Read More
CSS, Text overflows out of table cell

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions: Table code: https://dl.dropboxusercontent.com/u/108321090/…

Read More
Smarter word break in CSS?

If I just put word-break: break-all on an element, I often end up with this: Hello people, I am typing a mes sage that's too long to fit! Obviously this would be much better as: Hello people, I am typing …

Read More