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.

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". — , Oct 02 '12 at 23:20

score 63 · Accepted Answer · edited Nov 12 '20 at 10:03

63

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

edited Nov 12 '20 at 10:03

Klesun

12,280
5
59
52

answered Oct 02 '12 at 23:21

PJ McCormick

1,903
14
12

6

`word-break: break-word` is non-standard for webkit, having the same problem as op [this](http://stackoverflow.com/questions/14190420/firefox-word-break-breaks-short-words-at-random-points/14191114#14191114) answer solves it. – Drust Mar 05 '14 at 08:53
3

`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. – KevinVictor Apr 28 '16 at 14:37
6

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. – Walty Yeung Dec 08 '16 at 08:04
1

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. – actaram May 16 '17 at 14:30

score 45 · Answer 2 · answered Feb 16 '18 at 15:47

45

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.

answered Feb 16 '18 at 15:47

Dominic White

459
4
3

Quick demo showing hyphen, word and break all happening. http://plnkr.co/plunk/uKaAc0FddZfs7pxl – Richard Collette Apr 17 '20 at 12:55
@RichardCollette I don't think your example shows the hyphen though. – Terry Windwalker May 21 '22 at 07:34

Nikhil Bhatia · Answer 3 · 2020-09-10T18:52:56.903

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 )

score 4 · Answer 4 · edited Dec 09 '15 at 11:56

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.

Chrome doesn't support it as Firefox https://caniuse.com/#search=hyphens.. just partially — VP., Aug 20 '19 at 13:05

score 3 · Answer 5 · answered Aug 25 '22 at 18:42

3

overflow-wrap: anywhere; is what you need.

answered Aug 25 '22 at 18:42

gztomas

3,030
3
27
38

A couple of years ago, [@Nikhil Bhatia suggested this in their answer](https://stackoverflow.com/a/63835882/3025856), 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. – Jeremy Caney Aug 27 '22 at 00:25

score 0 · Answer 6 · answered Jul 13 '22 at 13:48

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;
}

Smarter word break in CSS?

6 Answers6

Linked