Let's do some CSS Wrap!

Nope, I'm not writing a rap song on CSS 🎤.
But something better 😁.

A cheat sheet on various ways of text wrapping and overflow handling in CSS.

🖐
I know what you're thinking! "I know how to handle text wrapping and overflow in CSS. I've been doing them since forever." But believe me, there are some new properties and some major depreciations ongoing. Wouldn't hurt to spend 3min reading.

So without further adieu.

Text overflow handling in CSS is done using mostly these properties.

• overflow-wrap
• word-wrap
• word-break
• hyphens
• text-overflow
• white-space
• line-clamp

Quite a handful of options right! Wondering all properties and values to use?

Lucky for you, here's a list of the most common text-overflow handling scenarios and their CSS code snippets. 🎁

If you would like to read about text-overflow in general and what many of the above properties do, I highly recommend you read this MDN blogpost.

case 1

  overflow-wrap: break-word;

This property will move the last word in the line to the next line if it is too long to fit on the same line by itself without overflowing.

Downsides:
👎 But the downside is, you might get some empty spaces if the next word does not fit in the line.

Upsides:
👍 Good enough when container size is not small (>500px).
👍 Good browser support.

case 2

  text-align: justify;
  overflow-wrap: break-word;

Let's say you like case-1 but don't want those empty spaces at the line end. One solution is to justify the line text so that the end spaces are distributed throughout the line.

Downsides:
👎 Spaces between words might look uneven. Much evident when container size is small (<300px).
👎 justify only works if there are at least two words in the line.

Upsides:
👍 Good enough when container size is medium or larger (>300px).
👍 Good browser support.

case 3

  text-align: justify;
  word-break: break-all;

If you have a small container and want the whole line to be filled with letters and at the end of the line break on any word/letter. Then use this.

Downsides:
👎 if used on large container widths, can make reading the line's harder as the last words as split up in between.

Upsides:
👍 Best for small container widths.
👍 The whole container looks filled from side to side per line. (some designs might need that.)
👍 Good browser support.

case 4

  hyphens: auto;

if you wanna a mix of overflow-wrap: break-word; and word-break: break-all;, I would say use this. With hyphens:auto, the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses.

Downsides:
👎 Word/letter breaking not predictable.
👎 Needs vendor prfixes to work with all browsers

Upsides:
👍 Adds a hyphen(-) when breaking words in between. Makes readability slightly better.
👍 hyphens is language sensitive based on lang attribute.

Before we go to the next case, two bonus tips .

• word-break: break-word;(just the break-word value) has been deprecated. Use overflow-wrap: break-word; instead.
• word-wrap: has also been deprecated as a property. Use overflow-wrap instead.

case 5

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

Use this when you don't wanna show the overflowing text. 3 dots(...) is shown to convey that there is text being overflown and being hidden.

case 5

Multiline ellipsis

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;

Downsides:
👎 Not so good browser support
👎 You can't have padding on the text container as it will expose extra lines. 🤷‍♂️

That's it. Those were the most common text wrapping and overflow handling cases I could think of.

If you liked what you read, and wanna see what I'm lately up to, follow me on Twitter.