typography

overflow

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" })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.truncate()

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()