Let's do some CSS Wrap!
Tags: css, wordwrap, frontend
Published: 2021-05-03 04:36:54

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](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)
* [word-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)
* [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
* [hyphens](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
* [text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
* [white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
* [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text) MDN blogpost.

#### case 1
```css
  overflow-wrap: break-word;
```
{% codepen https://codepen.io/MrRobz/pen/vYgoGaE %}

> 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. ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncgbgl5p47607nlw7gxf.png) 
 
Upsides:
👍 Good enough when container size is not small (>500px).
👍 Good browser support.

#### case 2
```css
  text-align: justify;
  overflow-wrap: break-word;
```
{% codepen https://codepen.io/MrRobz/pen/xxgvVNN %}

> 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
```css
  text-align: justify;
  word-break: break-all;
```
{% codepen https://codepen.io/MrRobz/pen/xxgvOWw %}

> 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
```css
  hyphens: auto;
```
{% codepen https://codepen.io/MrRobz/pen/yLgmJjw %}

> 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
```css
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
```
{% codepen https://codepen.io/MrRobz/pen/mdRNrdx %}

> 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

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

{% codepen https://codepen.io/MrRobz/pen/qBReaZj %}

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](https://twitter.com/Robie577).