[ @sdxc/u/typography ]
truncate
Truncates single-line text with an ellipsis once it overflows its box; requires a bounded inline size (max-inline-size, a flex/grid item with min-inline-size: 0, or similar) or there is nothing to overflow against.
import { truncate } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.truncate() | css({ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) |
Examples
Basic example
Use truncate() to keep text on one line and end it in an ellipsis where it overflows:
The longest train in the world stretched over seven kilometres.
<div mix={[maxIs(64), ...]}>
<p mix={[truncate()]}>The longest train in the world stretched over seven kilometres.</p>
</div>Inside a flex row
A flex item refuses to shrink below its content, so give the text column minIs(0) for truncate() to have an edge to cut at:
Alexandra Montgomery-Whitfield
alexandra.montgomery-whitfield@example.com
<div mix={[hstack({ gap: 3, align: "center" }), maxIs(64), ...]}>
<div mix={[is(10), shrink(0), circle(), bg("brand.solid")]} />
<div mix={[minIs(0)]}>
<p mix={[truncate(), weight("semibold")]}>Alexandra Montgomery-Whitfield</p>
<p mix={[truncate(), text("sm"), fg("neutral.muted")]}>
alexandra.montgomery-whitfield@example.com
</p>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.truncate())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.truncate())Signature
u.truncate()