# hyphens

> Lets long words break with a hyphen instead of forcing the line short.

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

Lets long words break with a hyphen instead of forcing the line short.
`"auto"` hyphenates only when the element or an ancestor carries a `lang`
attribute to pick a dictionary from — omit it and nothing hyphenates.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.hyphens()` | `css({ hyphens: "auto" })` |
| `u.hyphens("manual")` | `css({ hyphens: "manual" })` |
| `u.hyphens("none")` | `css({ hyphens: "none" })` |

## Examples

### Basic example

Use `hyphens()` to let the browser hyphenate long words from its dictionary, chosen by the `lang` attribute on the element or an ancestor:

```tsx
<div mix={[...]}>
	<div mix={[maxIs(48), ...]}>
		<p mix={[...]}>hyphens()</p>
		<p lang="en" mix={[hyphens()]}>
			The committee's recommendations on intergovernmental telecommunications infrastructure
			were characteristically uncompromising.
		</p>
	</div>
	<div mix={[maxIs(48), ...]}>
		<p mix={[...]}>hyphens("none")</p>
		<p lang="en" mix={[hyphens("none")]}>
			The committee's recommendations on intergovernmental telecommunications infrastructure
			were characteristically uncompromising.
		</p>
	</div>
</div>
```

### Manual hyphenation

Use `hyphens("manual")` to break words only where you mark them with a soft hyphen (`&shy;`), and `hyphens("none")` to ignore even those:

```tsx
<div mix={[...]}>
	<div mix={[maxIs(48), ...]}>
		<p mix={[...]}>hyphens("manual")</p>
		<p lang="de" mix={[hyphens("manual")]}>
			Kraft&shy;fahr&shy;zeug&shy;haft&shy;pflicht&shy;ver&shy;si&shy;che&shy;rung
		</p>
	</div>
	<div mix={[maxIs(48), ...]}>
		<p mix={[...]}>hyphens("none")</p>
		<p lang="de" mix={[hyphens("none")]}>
			Kraft&shy;fahr&shy;zeug&shy;haft&shy;pflicht&shy;ver&shy;si&shy;che&shy;rung
		</p>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.hyphens())
```

## Responsive design

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

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

## Signature

```ts
u.hyphens(value?: HyphensValue)
```