overflow-wrap: normal | break-word
| Initial value |
normal
|
|---|---|
| Applies to | all elements |
| Inherited | yes |
part { overflow-wrap: break-word; }
supplier, item { overflow-wrap: normal; }
<part><supplier>xyz</supplier><item>12345</item></part>
This property controls wrapping behaviour of last resort:
whether it is better for a word to overflow its container,
or to be broken at an arbitrary point
(subject to white-space, and not splitting within a grapheme cluster),
without adding a hyphen.
The value normal allows text containing no other wrap
opportunities to overflow.
This feature is most commonly used for non-words such as URIs, part codes,
or cryptographic hashes.
For such purposes, overflow-wrap:break-word can be
compared with word-break:break-all:
the latter is more willing to break the word (preferring to break
than to leave an under-full line or advance past a CSS2-style float),
but only breaks between alpha-numeric grapheme clusters rather than
between any pair of grapheme clusters.
The element whose overflow-wrap property controls
whether such a wrap opportunity exists at a given boundary
is the closest ancestor that “strictly contains” the boundary,
i.e. that contains text from both sides of the boundary.
Thus, components of a wrappable string can be kept on one line
by styling each component with overflow-wrap:normal
even if two components are directly adjacent to each other, as
seen in the above example.