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;?
- 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)
- 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 theAL
thenbreak-all
will make the restongWord
go to the second line. This will not be done for theCJK
characters. - keep-all: Break by normal line rules except for the CJK characters. It's like
normal
except in case ofCJK
it won't break at all (neither by line rules as done bynormal
nor at characters as done bybreak-all
)
Following is the screenshot of the example at Mozzila documentation.
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 likeword-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
How Does Flex-Wrap Work With Align-Self, Align-Items and Align-Content
Center a Column Using Twitter Bootstrap 3
How to Have Multiple Background Images Using Css
Complex CSS Selector For Parent of Active Child
How to Remove the Stripes That Appears When Using Linear Gradient Property
What's So Bad About In-Line Css
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Css Child VS Descendant Selectors
Maintaining the Final State At End of a Css3 Animation
Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T
Flex-Box: Align Last Row to Grid
Bootstrap Dropdown Sub Menu Missing
Targeting Only Firefox With Css
Using CSS For a Fade-In Effect on Page Load