CSS word-break

The word-break CSS property defines if line breaks are allowed in words. It only allows breaking between any two characters or not breaking at all.

word-break is primarily useful when working with East Asian languages. If you are looking for the best way to hyphenate English characters, use the hyphens property.

word-break: normal|break-all|keep-all
word-break: normal;      /* don't break words */
word-break: break-all;   /* break at any character */

The default normal doesn't break words, while break-all allows breaking between any two characters. According to the specification, it is most useful in CJK (Chinese, Japanese Korean) languages when mixed with English for example, to better distribute text. keep-all affects only Chinese Japanese and Korean languages. It makes those languages behave like English and break only at spaces.

Browser Support: Full support for break-all. Partial support for keep-all. See the word-break compatibility table for more details.

word-break: break-all

break-all will break lines within words always, unless there happens to be a space at the end of the line.

div.cont {
word-break: break-all;
}
This text has the word-break: break-all rule. The line breaks when it reaches it's container boundary. To break only strings that would overflow otherwise, use word-wrap / overflow-wrap.

word-break vs overflow-wrap (word-wrap)

While word-break: break-all breaks any word at the end of the line, overflow-wrap: break-word will break only long words, that would overflow otherwise. See the overflow-wrap's page for more details.

div.cont {
word-wrap: break-word;
}
This text has the word-wrap: break-word rule. Only lines that would overflow are broken, for example, URLs: http://extremelylongdomain.com/extremely_long_path_that_doesnt_fit_in_one_line

There's no way to add hyphens

word-break doesn't add any hyphens and the hyphens property is a totally different way of breaking words. Using hyphens instead of word-break is in fact the best way to hyphenate most languages.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>