# CSS Text Wrap

The `text-wrap` property controls how text inside an element wraps. It introduces values like `balance` and `pretty` to solve common typographic issues on the web, such as uneven headlines or orphans in paragraphs.

## 1. Values

### `wrap` (Default)
Text wraps at the most appropriate point to minimize overflow. This is standard browser behavior.

### `nowrap`
Text does not wrap. It continues on the same line until a `<br>` tag is encountered.

### `balance`
The browser attempts to balance the number of characters on each line. This is designed for **headlines** and short blocks of text.

```css
h1 {
  text-wrap: balance;
}
```

**Before:**
> The Quick Brown Fox Jumps Over
> The Lazy Dog

**After (Balanced):**
> The Quick Brown Fox
> Jumps Over The Lazy Dog

*   **Performance:** Balancing text is computationally expensive. Browsers limit this to blocks with a small number of lines (usually 4-6). Do not use this on long paragraphs.

### `pretty`
The browser uses a slower algorithm to layout text for better typographic results. It is designed for **body text**. Its primary goal is to prevent **orphans** (a single word on the last line of a paragraph).

```css
p {
  text-wrap: pretty;
}
```

*   **Performance:** Slower than `wrap` but faster than `balance`. It's suitable for longer blocks of text.

## 2. Browser Support

*   **`balance`**: Supported in Chrome, Edge, Safari, and Firefox.
*   **`pretty`**: Supported in Chrome and Edge (v117+).

## 3. Use Cases

*   **Headings:** Use `text-wrap: balance` to make titles look symmetrical and professional.
*   **Articles:** Use `text-wrap: pretty` on paragraphs to avoid awkward single words at the end of blocks.

[[programming/css/css]]
[[programming/css/typography]]