text-wrap: balance

text-wrap: balance is a CSS property that automatically balances text across lines for better readability and visual appeal.

Instead of letting text wrap naturally (which can create awkward line breaks), it redistributes words to create more balanced line lengths.

Why use it?

• Eliminates awkward line breaks in headings and short text blocks

• Creates more visually appealing text layouts

• Improves readability, especially for titles and headlines

• No more manual line breaks or CSS hacks needed

Basic Usage

h1, h2, h3 {
  text-wrap: balance;
}

.short-text {
  text-wrap: balance;
  max-width: 300px;
}

Before vs After

Without text-wrap: balance, a heading might break like this:

/* Before */
h1 {
  /* text-wrap: balance; */
}

/* Result: */
/* "Building a Better Blog with" */
/* "Tiptap" */

With text-wrap: balance:

/* After */
h1 {
  text-wrap: balance;
}

/* Result: */
/* "Building a Better" */
/* "Blog with Tiptap" */

Browser Support

Currently supported in Chrome 114+, Firefox 121+, and Safari 17+. For older browsers, you can use a fallback:

h1 {
  /* Fallback for older browsers */
  text-align: center;
  
  /* Modern browsers */
  text-wrap: balance;
}

Perfect for

• Page titles and headings

• Card titles and descriptions

• Navigation labels

• Call-to-action text

• Any short text block that needs balanced wrapping

One of those small CSS properties that makes a big difference in how text looks and feels.