[ @sdxc/u/typography ]
white-space
Prevents text from wrapping onto multiple lines, letting it overflow its box instead.
import { nowrap } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.nowrap() | css({ whiteSpace: "nowrap" }) |
Examples
Basic example
Use nowrap() to keep text on a single line, letting it overflow its box instead of wrapping:
The longest train in the world stretched over seven kilometres.
<div mix={[maxIs(64), ...]}>
<p mix={[nowrap()]}>The longest train in the world stretched over seven kilometres.</p>
</div>Keeping a label whole
Put nowrap() on a short label like a price or a date so the text beside it does the wrapping:
Hand-thrown stoneware mug, speckled glaze, 350 ml
US$ 38.00
<div mix={[hstack({ gap: 4, align: "start" }), maxIs(72), ...]}>
<p>Hand-thrown stoneware mug, speckled glaze, 350 ml</p>
<p mix={[nowrap(), weight("semibold"), fg("brand")]}>US$ 38.00</p>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.nowrap())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.nowrap())Signature
u.nowrap()