Recently, I’ve been struggling to understand how CSS properties typically come together to handle the wrapping and truncating of text items. My confusion stems from a number of implicit behaviours and the fact that some properties are able to override (or nullify) the values of others.
overflow-wrap: break-word and
word-break: break-word, for instance, boggle my mind a bit. Besides the way they are named, both property-value pairs lead to very similar behaviours, but the properties themselves aren’t synonymous with each other.
overflow-wrap: anywhere can be thought of as a variant of
overflow-wrap: break-word (as we’ll soon see below) while
word-break: break-all is very different from
It helps to think of
overflow-wrap as only applying to words that will overflow even when granted a full line to themselves.
word-break, on the other hand, applies to words in a more general sense.
Other less significant examples would be
text-overflow: ellipsis, which implicitly requires you to set
To be fair, implicit requirements are common in CSS (think about how layout properties are defined ––
display: grid and
display: flex). That said, developers working around text-specific quirks might find themselves hitting roadblocks every now and then if they’re not already familiar with the relationships between properties.
I’ve found it useful to think about text wrapping in a top-down manner. We start by evaluating the text body as single chunk and then gradually narrow our considerations down to “atomic” word / character components.
In particular, the following order of considerations make the most sense to me:
text-align: How do we want the text to be aligned?
text-overflow: How do we want overflowing text to be cut off?
white-space: How do we want the spaces between words (and groups of words) to be handled?
overflow-wrap: For words that extend beyond a single line, how should we break them?
word-break: For words in general, do we allow them to be broken? How should we break them?
hyphens: Do we want to break words with hyphens?
Check out this Storybook-inspired sandbox I’ve made which contains a text component supporting various toggleable values for each of the items in the above list. I’ve made this so that I wouldn’t be fussing around with these CSS properties as often in the future –– hopefully it’ll help you too!
Some interesting points to note:
hyphens: autoimplicitly overrides
word-break: normal. It tells the browser that we’re okay with breaking all words at overflow thresholds and we’d like to hyphenate these breakpoints.
- Compared to
word-break: break-alljust does the first thing (telling the browser that words can be broken at any character when they hit the overflow threshold), but doesn’t bother with the second (i.e. the value of
If, like me, you’ve gotten the impression from this CSS Tricks article that
text-overflow: ellipsisis only applied when
white-space: nowrapis used, then you should know that that’s not entirely accurate.
text-overflow: ellipsisworks fine with other options, including
overflow-wrap: anywhereis almost the same as
overflow-wrap: break-word–– except that it allows the message container to be shrunken down to its minimum width if
width: min-contentis applied.
- Take a peek at this awesome video from Mozilla Developers which explains this nuance.