Difference Between "Word-Break: Break-All" Versus "Word-Wrap: Break-Word" in Css

What is the difference between word-break: break-all versus word-wrap: break-word in CSS

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

overflow-wrap: break-word vs. word-break: break-word

The difference lies in the way min content intrinsic sizes are calculated. Soft wrap opportunities introduced by the break are taken into account for word-break:break-word but not for overflow-wrap:break-word. So for an example of the difference between them, we need to choose something that sizes according the min content intrinsic size, such as a float:

body {
width:160px;
}
p {
float:left;
border:1px solid;
}

.overflow-wrap {
overflow-wrap: break-word;
}

.word-break {
word-break: break-word;
}
<p>A popular long word in Engish is 
<i class="overflow-wrap">antidisestablishmentarianism</i>,
although longer more contrived words exist</p>
<p>A popular long word in Engish is
<i class="word-break">antidisestablishmentarianism</i>,
although longer more contrived words exist</p>

whats the difference between word-break: normal; and word-break: keep:all;?

  1. normal: Follow normal line break rules, that is to break line at the space between words. So even if the last words goes out of bounds of the container, sentence won't go to next line till next word comes. This will be done for all text even for CJK characters (Chinese, Japanese, Korean and derivatives)
  2. break-all: Break at the characters if out of bounds, that means a word itself will be broken and taken to the second line. So suppose ALongWord is going out of bounds at the AL then break-all will make the rest ongWord go to the second line. This will not be done for the CJK characters.
  3. keep-all: Break by normal line rules except for the CJK characters. It's like normal except in case of CJK it won't break at all (neither by line rules as done by normal nor at characters as done by break-all)

Following is the screenshot of the example at Mozzila documentation.
word-break

Notice the difference between how the non CJK and CJK sentences are treated.

Difference between word-wrap: break-word and word-break: break-word

Update

If you plan on breaking words and want to hyphenate as well, try the following:

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

This worked even in Chrome ... sort of ... sans hyphens. Anyways a detailed explanation is in this article.


word-break:break-word is not documented and only master developers know this ultra secret technique like the Quivering Palm of Death.

Actually it's an obscure -webkit- property that works like word-wrap: break-word but it's also used on dynamic lengths as well.

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

From CaniUse:

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

What's the difference between `word-break: break-all` and `word-wrap: break-word`?

word-break: break-allits break the sentence and text in other line
word-wrap: break-word` its not break the sentence its break the line and full sentence go to next line without break

p { width:100px; word-break:break-all; padding-left:20px;}div { width:100px; word-wrap: break-word; padding-left:20px;}
<body><p>India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain's Carolina Marin in the final.</p><div>India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain's Carolina Marin in the final. </div></body>

Css: overflow-wrap: break-word; word-wrap: break-word; Differences

There is no difference between the two. overflow-wrap is the same as word-wrap. As you pointed out, word-wrap was renamed to overflow-wrap as this Post shows.

Difference between overflow-wrap: anywhere & overflow-wrap: break-word?

Most of the time they're very similar.

One case when they're different: when you have a super long word (like an url) that is longer than the width of the container, and the container is a flex item with flex-grow, then anywhere will break the long word, whereas break-word will try to grow aggressively and avoid breaking the word when possible, which may squeeze other flex items out of proportion.

In this case, anywhere is more likely what you want. If that's true, you might as well do this:

overflow-wrap: break-word;
overflow-wrap: anywhere;

Because browser supports of break-word is better than anywhere, and browsers that don't support anywhere will ignore the 2nd line, which is not too bad.

CSS word-break: break-all; (only for long words)?

I think you're looking for word-break: break-word; or overflow-wrap: break-word;. Here's how MDN Web Docs describes break-word:

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

The page goes on to note that it is not supported in Firefox and Internet Explorer.

The Caniuse reference for word-break notes that break-word is unofficial and treated like overflow-wrap: break-word; (overflow-wrap is a synonym of word-wrap).

As it so happens, overflow-wrap seems to have pretty good support, so you'd probably be better off with that instead.



Related Topics



Leave a reply



Submit