Mastering CSS Balance: "text-wrap: balance"
Tags: css, typography
Published: 2023-10-23 14:44:51

---
title: Mastering CSS Balance: "text-wrap: balance"
published: true
description: Text-wrap: balance is a CSS property that optimizes text distribution, improving readability and enhancing the aesthetics of web page layouts.
tags: CSS, typography
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ohx1ofc9g3ykwypeb5u.png
---

When it comes to web design, one aspect that often requires careful consideration is how text flows within a layout. While CSS offers various properties to control text wrapping and line breaking, the `text-wrap` property stands out for its unique approach to handling long strings of text. In this blog post, we'll delve into the `text-wrap` property, with a specific focus on `text-wrap: balance`.

## Understanding Text-Wrap

The `text-wrap` property, introduced in CSS3, is a valuable tool for controlling how text wraps within its containing element. It allows you to specify how text should break and wrap when it encounters the edge of its container. The property can take several values, including `wrap`, `nowrap`, `balance`, `stable`, `pretty`.

```
text-wrap = 
  wrap     |
  nowrap   |
  balance  |
  stable   |
  pretty   
```
Source: [MDN: text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#formal_syntax)


{% codepen https://codepen.io/Chursin/pen/ExraamB %}


### The `text-wrap: balance` Value

The `text-wrap: balance` value is a relatively lesser-known aspect of the `text-wrap` property, but it can significantly impact how text is presented on your web page. This value is especially useful when dealing with narrow columns of text, as it optimizes the text distribution to maintain a balanced appearance.

By setting `text-wrap` to `balance`, you are instructing the browser to distribute the text within the container, avoiding uneven gaps between lines and achieving a more uniform appearance.

## Advantages of `text-wrap: balance`

Now, let's explore some of the key advantages of using `text-wrap: balance`:

### 1. Improved Readability

Balanced text wrapping helps enhance the readability of your content. By minimizing uneven gaps and preventing overly long lines, users can smoothly read through your text without feeling overwhelmed or distracted.

### 2. Enhanced Aesthetics

Aesthetics are crucial in web design, and balanced text wrapping plays a significant role in achieving a polished and professional look. It prevents the visual clutter that can occur with irregular text distribution.

### 3. Consistency Across Devices

`text-wrap: balance` can be particularly helpful in creating a consistent reading experience across different devices and screen sizes. It ensures that text remains visually appealing and legible, whether your audience is viewing your content on a large desktop monitor or a small mobile screen.

### Pretty vs. Balance
- `text-wrap:pretty` avoids typographic orphans,
- `text-wrap:balance` tries to make the lengths of all lines balanced as much as possible.
Source: [Design docs](https://docs.google.com/document/d/1jJFD8nAUuiUX6ArFZQqQo8yTsvg8IuAq7oFrNQxPeqI/edit)

## Browser Compatibility

Before fully implementing `text-wrap: balance`, it's essential to check the browser compatibility. `text-wrap: balance` property is [not widely supported](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#browser_compatibility). Let's hope this changes as browsers catch up with with [CSS Text Level 4](https://www.w3.org/TR/css-text-4/#text-wrap)

## Conclusion

The `text-wrap: balance` CSS property is a valuable addition to your web design toolkit, especially when aiming for a clean and professional text layout. By using `text-wrap: balance`, you can ensure that text is distributed in an eye-pleasing way, improving readability and enhancing the overall aesthetics of your web pages. Keep in mind that while this property offers aesthetics benefits, it's crucial to verify its compatibility with your target audience's browsers to ensure a seamless user experience.

## More information
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#balance)
[CSS text-wrap: balance](https://developer.chrome.com/blog/css-text-wrap-balance/)
[CSS Text Level 4](https://www.w3.org/TR/css-text-4/#text-wrap)
[Score-based Paragraph-level Line Breaking](https://docs.google.com/document/d/1jJFD8nAUuiUX6ArFZQqQo8yTsvg8IuAq7oFrNQxPeqI/edit#heading=h.cqq9czoal00g)