# white-space

> Applies `white-space`; also written by `u.nowrap()`, `u.truncate()`, and `u.visuallyHidden()`, so pick one.

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

Applies `white-space`; also written by `u.nowrap()`, `u.truncate()`, and
`u.visuallyHidden()`, so pick one. Defaults to `pre-wrap`, keeping
preformatted line breaks while still wrapping in a narrow container.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.whiteSpace()` | `css({ whiteSpace: "pre-wrap" })` |
| `u.whiteSpace("pre")` | `css({ whiteSpace: "pre" })` |
| `u.whiteSpace("pre-line")` | `css({ whiteSpace: "pre-line" })` |

## Examples

### Basic example

Use `whiteSpace()` to keep the line breaks and spaces written in the text while still wrapping long lines; `whiteSpace("normal")` collapses them:

```tsx
<div mix={[maxIs(72), ...]}>
	<div mix={[...]}>
		<p mix={[...]}>whiteSpace()</p>
		<p mix={[whiteSpace()]}>
			{
				"Leave the parcel with the neighbour at number 14.\n\nIf nobody answers,    try the side gate."
			}
		</p>
	</div>
	<div mix={[...]}>
		<p mix={[...]}>whiteSpace("normal")</p>
		<p mix={[whiteSpace("normal")]}>
			{
				"Leave the parcel with the neighbour at number 14.\n\nIf nobody answers,    try the side gate."
			}
		</p>
	</div>
</div>
```

### Keeping only line breaks

Use `whiteSpace("pre-line")` to keep line breaks but collapse runs of spaces into one:

```tsx
<p mix={[whiteSpace("pre-line"), ...]}>
	{
		"“Hope” is the thing with feathers -\n    That perches in the soul -\n    And sings the tune without the words -\n    And never stops - at all -"
	}
</p>
```

### Preserving everything

Use `whiteSpace("pre")` to keep every space and line break exactly as written, without wrapping:

```tsx
<div mix={[maxIs(72), ...]}>
	<p mix={[whiteSpace("pre")]}>
		{
			"12:04:51  GET   /api/orders        200   18ms\n12:04:52  POST  /api/orders/checkout  201   142ms"
		}
	</p>
</div>
```

## Applying on a state

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

```ts
u.hover(u.whiteSpace())
```

## Responsive design

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

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

## Signature

```ts
u.whiteSpace(value?: WhiteSpaceValue)
```