# lineClamp

> Truncates text via the `-webkit-line-clamp` trick.

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

Truncates text via the `-webkit-line-clamp` trick. `lines` is
stringified because the CSS serializer appends `px` to unlisted unitless
properties, which would invalidate the declaration and clamp nothing.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.lineClamp(3)` | `css({ display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: "3", overflow: "hidden" })` |

## Examples

### Basic example

Use `lineClamp(n)` to cut text off after a number of lines, ending the last one in an ellipsis:

```tsx
<article mix={[maxIs(80), ...]}>
	<p mix={[text("sm"), fg("neutral.muted")]}>Mar 10, 2026 · Marketing</p>
	<h3 mix={[text("lg"), weight("semibold")]}>What we learned testing forty pricing pages</h3>
	<p mix={[lineClamp(3), fg("neutral.muted")]}>
		Most visitors leave a pricing page within ten seconds. We tested forty variations of ours
		over six months, and the changes that moved the number were not the ones we expected: fewer
		plans, a plainer headline, and a single button that said exactly what would happen next.
	</p>
</article>
```

### Changing the line count

Pass a smaller number for a tighter preview, like `lineClamp(1)` in a list of messages:

```tsx
<div mix={[maxIs(80), ...]}>
	<div>
		<p mix={[...]}>lineClamp(1)</p>
		<p mix={[lineClamp(1)]}>
			The pasta was perfect and the tiramisu even better, but we waited forty minutes for a
			table we had booked a week ahead, and nobody apologised.
		</p>
	</div>
	<div>
		<p mix={[...]}>lineClamp(2)</p>
		<p mix={[lineClamp(2)]}>
			The pasta was perfect and the tiramisu even better, but we waited forty minutes for a
			table we had booked a week ahead, and nobody apologised.
		</p>
	</div>
</div>
```

## Using a custom value

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

```ts
u.lineClamp("2.75rem")
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.lineClamp(3))
```

## Responsive design

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

```ts
u.at("md", u.lineClamp(3))
```

## Signature

```ts
u.lineClamp(lines: number)
```