[ @sdxc/u/typography ]
overflow-wrap
Applies overflow-wrap, breaking a word only when it would otherwise overflow a bounded inline size, while ordinary text keeps its normal break points — ideal for a long URL, hash, or identifier in a narrow column.
import { overflowWrap } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.overflowWrap() | css({ overflowWrap: "break-word" }) |
u.overflowWrap("anywhere") | css({ overflowWrap: "anywhere" }) |
Examples
Basic example
Use overflowWrap() to break a word too long for its line, like a URL or a hash, while the rest of the text wraps at spaces as usual:
overflowWrap()
Read the full report at https://example.com/reports/2026/annual-sustainability-review
default wrapping
Read the full report at https://example.com/reports/2026/annual-sustainability-review
<div mix={[...]}>
<div mix={[maxIs(64), ...]}>
<p mix={[...]}>overflowWrap()</p>
<p mix={[overflowWrap()]}>
Read the full report at https://example.com/reports/2026/annual-sustainability-review
</p>
</div>
<div mix={[maxIs(64), ...]}>
<p mix={[...]}>default wrapping</p>
<p>Read the full report at https://example.com/reports/2026/annual-sustainability-review</p>
</div>
</div>Breaking anywhere
A flex or grid item sizes itself from its longest word, so use overflowWrap("anywhere") to let it shrink and wrap where overflowWrap("break-word") would overflow:
<div mix={[...]}>
<div mix={[hstack({ gap: 2 }), maxIs(64), ...]}>
<span mix={[weight("semibold")]}>Commit</span>
<span mix={[overflowWrap("anywhere"), font("mono")]}>
9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f1
</span>
</div>
<div mix={[hstack({ gap: 2 }), maxIs(64), ...]}>
<span mix={[weight("semibold")]}>Commit</span>
<span mix={[overflowWrap("break-word"), font("mono")]}>
9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f1
</span>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.overflowWrap())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.overflowWrap())Signature
u.overflowWrap(value?: OverflowWrapValue)