CSS wordwrap: Because Sometimes One Line Just Isn't Enough!

Controlling how text wraps with CSS can be a headache. CSS offers a number of text wrapping options to keep your content readable and responsive. So your text doesn't break the page layout or look like it lost a fight with a blender.

Introduction

Text wrapping is vital in web design for content readability and visual appeal across different devices and screen sizes. CSS provides properties like overflow-wrap, word-break, text-wrap and hyphens that allow developers to control text behavior at the edge of its container. This post explores the practical use of these properties to manage long strings, prevent overflow, and enhance user experience. These CSS rules are essential when dealing with unbreakable URLs, optimizing text readability and maintaining responsive designs.

Wrapping vs Truncation

For the purposes of this post I'm only going to focus on text that needs to be visible to the user, hence it needs to wrap and ignore the truncation option entirely. Although, there is some overlap in the use-cases, text truncation has a more specific use-case and is specifically for hiding content over a specific length. So I'm just going to skip over it here!

Text wrapping style options

Let's jump straight in and take a look at some styles we can use to prevent strings form overflowing their container.

TLDR

Ok, I'm going to skip the boring bits and go straight to the summary. (For reference, the rather dry detail about each style follows further down the page.)

/* use for headings */
.my-h1 {
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* use for general static copy */
.my-text-container {
  hyphens: auto;
  overflow-wrap: break-word;
}
/* 
  use specifically for breaking long strings or
  on large/dynamic content containers which 
  may contain long strings
 */
.my-url-container,
.my-very-big-text-container,
.my-dynamic-text-container {
  overflow-wrap: break-word;
}

As with most things CSS, there is more than one way to solve the problem. But which is the best? Let's look at three use-cases. Headings where long words might overflow on small devices, static content containers which could contain long strings like URLs, and containers that could either contain a lot of content or are repeatedly updated dynamically. Let's take these three in revers order. For contains that contain a lot of content, or are dynamically updated we can use overflow-wrap: break-word this will keep the content within the containers' boundaries. For short or static content (see below for detail about hyphens and performance) we can add hyphens: auto this will improve readability, but we still keep overflow-wrap: break-word which will ensure that long strings still wrap if the content is in a language that the browser doesn't know how to hyphenate or the long strings aren't words. And lastly for headings (e.g. H1) we'll keep hyphens and overflow-wrap and we'll also add text-wrap: balance this adds visual balance to the mix, so the header wraps nicely.

The boring bit

Let's look at the styles in more detail

hyphens: auto;

Using hyphens: auto in CSS allows for automatic, language-aware hyphenation of text, which can significantly enhance the readability and aesthetic of text blocks, particularly in responsive designs and narrow layouts.

hyphens, on the downside

This does more than just breaking long strings that don't fit in the container. You might still get text overflowing the container, for example a very long number won't be hyphenated so will still remain on one line. hyphens: auto has a performance overhead due to the processing required to determine hyphenation points, especially in dynamic or large text content. To mitigate the impact of this, particularly for containers with extensive or frequently changing text, I recommend only using hyphens: auto on specific elements that would benefit from it, don't just randomly add it here, there and everywhere!

overflow-wrap: break-word;

This style ensures that long words or unbreakable strings (such as URLs) break and wrap onto the next line instead of overflowing their container.

overflow-wrap, on the downside

Arbitrary word breaks at any point, which can lead to awkward or hard-to-read text breaks, disrupting the natural flow of reading. A small performance overhead (although less than that of hyphens).

word-wrap: break-word;

This is an alias for overflow-wrap: break-word, which is the standardized property name. Use overflow-wrap: break-word instead.

word-wrap: break-all;

I have nothing good to say about word-wrap: break-all. I can't think of any use-case for it. Only consider using this if you have a specific issue that isn't fixed by any of the other options!

break-all, on the downside

It breaks words excessively at any character, leading to awkward and very hard-to-read text at all widths.

Balancing text-wrapping

The style text-wrap: balance does NOT break strings. This is shorthand property which controls how text inside an element is wrapped, it's not standard (yet) but has solid support in all major browser vendors. I use this on main header elements (e.g. h1) to visually balance the content and make it more aesthetically pleasing. This is part of the css-text-4 text-wrapping proposal

text-wrap balance on the downside

I haven't seen any detailed performance metrics so I might be making too much of the potential performance impact. But nonetheless, I would only use this on specific static elements like headers. I wouldn't use this on large content blocks or anything that's repeatedly updated dynamically.

Blog