# text-wrap

> Balances line lengths across a wrapped block, best suited to short text such as headings, since browsers cap balancing to a small number of lines.

```ts
import { balance } from "@sdxc/u/typography";
```

Balances line lengths across a wrapped block, best suited to short text
such as headings, since browsers cap balancing to a small number of
lines. Use pretty for long-form body copy.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.balance()` | `css({ textWrap: "balance" })` |

## Examples

### Basic example

Use `balance()` to distribute the text evenly across each line of a heading:

```tsx
<div mix={[maxIs(80), ...]}>
	<div>
		<p mix={[...]}>balance()</p>
		<h3 mix={[balance(), text("2xl"), weight("bold")]}>
			City council approves a riverside bike lane after two years of heated debate
		</h3>
	</div>
	<div>
		<p mix={[...]}>default wrapping</p>
		<h3 mix={[text("2xl"), weight("bold")]}>
			City council approves a riverside bike lane after two years of heated debate
		</h3>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.balance())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.balance())
```

## Signature

```ts
u.balance()
```