What is CSS line clamping?

CSS line clamping limits text to a set number of lines and adds an ellipsis (…) at the end. It uses the -webkit-line-clamp property combined with display: -webkit-box and overflow: hidden. Despite the -webkit- prefix, it is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

Is -webkit-line-clamp safe to use in production?

Yes. -webkit-line-clamp has universal browser support since 2020 and is now part of the CSS Overflow specification. It works reliably in Chrome 88+, Firefox 68+, Safari 13+, and Edge 88+. The generated CSS is production-safe.

How do I use line-clamp in Tailwind CSS?

Tailwind CSS v3.3+ includes built-in line-clamp utilities: line-clamp-1 through line-clamp-6, and line-clamp-none to remove clamping. For any count, use the CSS output from this tool or add a custom class. This generator shows the exact Tailwind class for each line count.

Can I clamp text in React without extra CSS?

Yes — use inline styles on your element: style={{ display: '-webkit-box', WebkitLineClamp: N, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}. This generator produces the exact React inline style object. No CSS file needed.

Does line clamping affect accessibility?

The clamped text is still in the DOM, so screen readers can read the full content. Only the visual display is truncated. If you need to hide content from screen readers too, add aria-hidden='true', but usually the full text is preferable for accessibility.

What happens if the text is shorter than the line limit?

Nothing — if your text fits within the specified line count, the CSS has no effect and the full text is shown without ellipsis. Line clamping only activates when the content overflows the allowed lines.

Free CSS Tool

Truncate Text
to Any Number of Lines

Generate -webkit-line-clamp CSS instantly. Adjust line count, font size, and line height — then copy production-ready CSS, Tailwind, or React code.

👁️

Live Preview

See your text clamped in real time as you adjust the controls. No guesswork.

📋

Three Output Formats

Copy ready-to-use CSS, Tailwind utility classes, or React inline styles — whatever your stack needs.

⚡

100% Client-Side

Everything runs in your browser. No sign-up, no server, no uploads. Instant and private.

Controls

Lines3

110

Font Size16px

10px32px

Line Height1.6

1.02.5

Max Width600px

200px800px

Sample Text

Live Preview

— clamped to 3 lines —

The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How valiantly did Blazing Haze quench jets of foe vim!

— without clamping —

The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs. How valiantly did Blazing Haze quench jets of foe vim!

Max height: 77px (3 × 1.6 × 16px)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Lines

77px

Max height

100%

Browser support

Frequently Asked Questions

Everything you need to know about CSS Line Clamp Generator.

Truncate Textto Any Number of Lines

Live Preview

Three Output Formats

100% Client-Side

Controls

Live Preview

Frequently Asked Questions

Truncate Text
to Any Number of Lines