I'm reading the documentation of the CSS's overflow-wrap property.
In particular, the value anywhere
is documented as:
To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
While the value break-word
is documented as:
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.
But I don't know what are "soft wrap opportunities introduced by the word break" and what "min-content intrinsic sizes" are, so I cannot get the difference between those two values.
The differences between normal
, break-word
and anywhere
are only clear if you are using width: min-content
on the element containing the text, and you also set a max-width
. A pretty rare scenario.
div {
width: min-content;
max-width: 10em;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
.d2 {
overflow-wrap: break-word;
}
.d3 span {
overflow-wrap: anywhere;
}
.d4 {
overflow-wrap: anywhere;
}
<p>overflow-wrap: normal;</p>
<div class="d1">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>
<p>overflow-wrap: break-word;</p>
<div class="d2">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>
<p>overflow-wrap: anywhere; (on long word only)</p>
<div class="d3">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>
<p>overflow-wrap: anywhere; (on entire element)</p>
<div class="d4">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>