Smarter word break in CSS?

Question

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 f

Answer 1

For smart word breaks, or for correct word breaks in the first place, you need language-dependent rules. For English and many other languages, the correct breaking means hyphenation, with a hyphen added at the end of a line when a break occurs.

In CSS, you can use hyphens: auto, though you mostly still need to duplicate it using vendor prefixes. As this does not work on IE 9, you may consider JavaScript-based hyphenation like Hyphenate.js instead. In both cases, it is essential to use language markup (lang attribute).

Breaking long, unhyphenateable strings is a different issue. They would best be handled in preprocessing, but in a simple setting, word-break: break-word (which means incorrect breaking of words, in English for example) may be considered as an emergency.

Answer 2

Try word-break: break-word; it should behave as you expect.

Answer 3

For a lot of our projects we usually add this where necessary:

.text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

It handles most odd situations with different browsers.

Answer 4

The updated answer should be:

overflow-wrap:break-word;

It will break a word that by itself would not be able to fit on its own line, but leave all other words as they are (see overflow-wrap here).

You could also use:

overflow-wrap:anywhere; but this will allow line breaks after any word in an effort to reduce the width of an element. See the difference described below from MDN:

[break-word is] The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Also, anywhere is not supported by Internet Explore, Safari, and some mobile browsers while break-word is supported on all major browsers (see [here][2]).

word-break: break-word; should no longer be used because it is deprecated in favor of the overflow-wrap:break-word;. Now, the word-break property is intended to be used when you want to break words regardless of whether they could fit on their own line (i.e. the OP's first example with word-break: break-all.

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

(From overflow-wrap also linked above )