# overflow-wrap

> Applies `overflow-wrap`, breaking a word only when it would otherwise overflow a bounded inline size, while ordinary text keeps its normal break points — ideal for a long URL, hash, or identifier in a narrow column.

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

Applies `overflow-wrap`, breaking a word only when it would otherwise
overflow a bounded inline size, while ordinary text keeps its normal
break points — ideal for a long URL, hash, or identifier in a narrow column.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.overflowWrap()` | `css({ overflowWrap: "break-word" })` |
| `u.overflowWrap("anywhere")` | `css({ overflowWrap: "anywhere" })` |

## Examples

### Basic example

Use `overflowWrap()` to break a word too long for its line, like a URL or a hash, while the rest of the text wraps at spaces as usual:

```tsx
<div mix={[...]}>
	<div mix={[maxIs(64), ...]}>
		<p mix={[...]}>overflowWrap()</p>
		<p mix={[overflowWrap()]}>
			Read the full report at https://example.com/reports/2026/annual-sustainability-review
		</p>
	</div>
	<div mix={[maxIs(64), ...]}>
		<p mix={[...]}>default wrapping</p>
		<p>Read the full report at https://example.com/reports/2026/annual-sustainability-review</p>
	</div>
</div>
```

### Breaking anywhere

A flex or grid item sizes itself from its longest word, so use `overflowWrap("anywhere")` to let it shrink and wrap where `overflowWrap("break-word")` would overflow:

```tsx
<div mix={[...]}>
	<div mix={[hstack({ gap: 2 }), maxIs(64), ...]}>
		<span mix={[weight("semibold")]}>Commit</span>
		<span mix={[overflowWrap("anywhere"), font("mono")]}>
			9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f1
		</span>
	</div>
	<div mix={[hstack({ gap: 2 }), maxIs(64), ...]}>
		<span mix={[weight("semibold")]}>Commit</span>
		<span mix={[overflowWrap("break-word"), font("mono")]}>
			9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f1
		</span>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.overflowWrap())
```

## Responsive design

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

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

## Signature

```ts
u.overflowWrap(value?: OverflowWrapValue)
```