[ @sdxc/u/typography ]

white-space

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

whiteSpace()

Leave the parcel with the neighbour at number 14. If nobody answers, try the side gate.

whiteSpace("normal")

Leave the parcel with the neighbour at number 14. If nobody answers, try the side gate.

<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:

“Hope” is the thing with feathers - That perches in the soul - And sings the tune without the words - And never stops - at all -

<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:

12:04:51 GET /api/orders 200 18ms 12:04:52 POST /api/orders/checkout 201 142ms

<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.

u.hover(u.whiteSpace())

Responsive design

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

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

Signature

u.whiteSpace(value?: WhiteSpaceValue)