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.

Estey

Try word-break: normal; word-wrap: break-word? (I don't use CSS above a very primitive level, or know how it's handled, but it "seems like it might work". – Kammerer

Answer 1

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

Julian

word-break: break-word is non-standard for webkit, having the same problem as op this answer solves it. – Desiderate

word-wrap: break-word didn't work for me; it had no effect. I have text in a table cell and the table is contained in a div with max-width: 1000px Tested on Chrome and Firefox. – Waldo

The edit at Dec 2015 is probably not appropriate, it changed the answer totally. The old answer word-break: break-word; is not standard, but it actually works in my chrome. The new answer (after editing) word-wrap: break-word; does not work at all. IMHO directly editing the answer in this way seems to be confusing to the readers. – Gemmulation

For me word-wrap: break-word; works when I specify a width, no matter the unit. So, by specifying width: 100% I was able to make it work. However, I won't be upvoting this answer because the edit completely changes the answer (it wasn't a typo, it was downright another css property) and it wasn't even written by the original poster. – Rebeckarebeka

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.

Baribaric

Quick demo showing hyphen, word and break all happening. plnkr.co/plunk/uKaAc0FddZfs7pxl – Jalopy

@RichardCollette I don't think your example shows the hyphen though. – Cyclostyle

Answer 3

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 )

Heptamerous

Answer 4

overflow-wrap: anywhere; is what you need.

Hardshell

A couple of years ago, @Nikhil Bhatia suggested this in their answer, but also highlighted some limitations of this approach. Are their concerns no longer valid? It'd be useful to edit your answer to acknowledge those critiques and why you believe this remains the best option. – Burlingame

Answer 5

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.

Corrective

Chrome doesn't support it as Firefox caniuse.com/#search=hyphens.. just partially – Minna

Answer 6

This is what youre looking for:

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Syncarpous

Answer 7

In tailwind, it can be done by using:

<div class="break-all"></div>

Squamous