Smarter word break in CSS?

css word-break
Niet the Dark Absol picture Niet the Dark Absol · Oct 3, 2012 · Viewed 22.3k times · Source

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

PJ McCormick picture PJ McCormick · Oct 3, 2012

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

Related questions

Difference between overflow-wrap and word-break?

What´s the exact difference between overflow-wrap/word-wrap and word-break? And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap but it doesn't look …

Read More
How to use automatic CSS hyphens with `word-break: break-all`?

I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example. Such that the text would look like this: aaaaaaaa- aaaaaaaa- aaaaaaaa- aaaaaaaa I created a JSFiddle …

Read More
CSS, Text overflows out of table cell

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions: Table code: https://dl.dropboxusercontent.com/u/108321090/…

Read More