Reputation: 324640

Smarter word break in CSS?

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.

Upvotes: 87

Answers (8)

Thomas Aribart

Reputation: 31

You can use the <wbr/> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Upvotes: 2

Justin Herrera

Reputation: 653

In tailwind, it can be done by using:

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

Upvotes: -1

gztomas

Reputation: 3260

overflow-wrap: anywhere; is what you need.

Upvotes: 6

Elazar Zadiki

Reputation: 1137

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

Upvotes: 0

PJ McCormick

Reputation: 1993

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

Upvotes: 72

Nikhil Bhatia

Reputation: 127

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 )

Upvotes: 10

Dominic White

Reputation: 489

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.

Upvotes: 48

Jukka K. Korpela

Reputation: 201568

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.

Upvotes: 4

Smarter word break in CSS?

Answers (8)

Related Questions