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 fit!

Obviously this would be much better as:

Hello people, I am typing a
message that's too long to fit!

But at the same time if someone writes:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!

Then I'd want it to be:

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH!!!!!!

I can't seem to find a way to actually do this.

Note that the width of the element is not fixed and may change.

Answer 1

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

Answer 2

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 3

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.