# word-break

> Applies `word-break`.

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

Applies `word-break`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.wordBreak("break-all")` | `css({ wordBreak: "break-all" })` |

## Examples

### Basic example

Use `wordBreak("break-all")` to let the browser break a line between any two letters, filling every line to the edge:

```tsx
<div mix={[...]}>
	<div mix={[maxIs(64), ...]}>
		<p mix={[...]}>wordBreak("break-all")</p>
		<p mix={[wordBreak("break-all")]}>
			The longest word in a major English dictionary is
			pneumonoultramicroscopicsilicovolcanoconiosis.
		</p>
	</div>
	<div mix={[maxIs(64), ...]}>
		<p mix={[...]}>wordBreak("normal")</p>
		<p mix={[wordBreak("normal")]}>
			The longest word in a major English dictionary is
			pneumonoultramicroscopicsilicovolcanoconiosis.
		</p>
	</div>
</div>
```

### Keeping CJK words whole

Use `wordBreak("keep-all")` so Chinese, Japanese and Korean text wraps between words rather than in the middle of one:

```tsx
<div mix={[...]}>
	<div mix={[maxIs(48), ...]}>
		<p mix={[...]}>wordBreak("keep-all")</p>
		<p lang="ko" mix={[wordBreak("keep-all")]}>
			서울의 가을 하늘은 유난히 높고 맑아서 산책하기에 좋습니다.
		</p>
	</div>
	<div mix={[maxIs(48), ...]}>
		<p mix={[...]}>wordBreak("normal")</p>
		<p lang="ko" mix={[wordBreak("normal")]}>
			서울의 가을 하늘은 유난히 높고 맑아서 산책하기에 좋습니다.
		</p>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.wordBreak("break-all"))
```

## Responsive design

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

```ts
u.at("md", u.wordBreak("break-all"))
```

## Signature

```ts
u.wordBreak(value?: WordBreakValue)
```