[ @sdxc/u/typography ]

lineClamp

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

Mar 10, 2026 · Marketing

What we learned testing forty pricing pages

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.

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

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.

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.

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

u.lineClamp("2.75rem")

Applying on a state

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

u.hover(u.lineClamp(3))

Responsive design

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

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

Signature

u.lineClamp(lines: number)