80

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.

1
  • 2
    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".
    – user166390
    Oct 2, 2012 at 23:20

6 Answers 6

64

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

4
  • 6
    word-break: break-word is non-standard for webkit, having the same problem as op this answer solves it.
    – Drust
    Mar 5, 2014 at 8: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. Apr 28, 2016 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. Dec 8, 2016 at 8: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, 2017 at 14:30
46

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.

2
7

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 )

4

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.

1
3

overflow-wrap: anywhere; is what you need.

1
  • 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. Aug 27, 2022 at 0:25
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.