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

```ts
import { truncate } from "@sdxc/u/typography";
```

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.

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

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

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

```ts
u.hover(u.truncate())
```

## Responsive design

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

```ts
u.at("md", u.truncate())
```

## Signature

```ts
u.truncate()
```