MakerBox

CSS Line-Clamp Generator (Truncate Text to N Lines)

Truncate text to a chosen number of lines with an ellipsis — a -webkit-line-clamp rule for two or more lines, or nowrap for one.

CSS line-clamp generator

Preview

Line clamp truncates text to a fixed number of lines and adds an ellipsis at the end. Change the line count above to see how the preview and the generated CSS update together.
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Result: 6 lines, 116 characters

The multi-line rule works, with its -webkit- prefix, in Chrome 14+, Edge 17+, Firefox 68+, Safari 5+, Safari on iOS 5+. Source: caniuse

What this line-clamp generator does

Enter how many lines of text you want to keep and this tool builds the exact CSS needed to truncate a paragraph and append an ellipsis (…) when the content overflows. For two lines or more it emits the four declarations that make the pattern work — display: -webkit-box, -webkit-line-clamp: N, -webkit-box-orient: vertical and overflow: hidden — wrapped in a ready-to-paste .line-clamp rule; for a single line it emits the classic white-space: nowrap / text-overflow: ellipsis pattern instead, which needs no -webkit-box. A live preview shows your own sample text clamped to the chosen number of lines so you can confirm the result before copying. “Preview typeface” draws the preview, and the text box with it, in a face installed on your device — Arial, Georgia, Malgun Gothic and the like, each backed by its generic family — or in a generic family itself; the typeface is for the preview and is not written into the rule.

How to use the generated CSS

Copy the block and apply the .line-clamp class to the element that holds your text, or fold the declarations into an existing selector. The element must be a block-level container with a constrained width so the text can wrap; the browser then hides everything past your line limit and adds the trailing ellipsis automatically. Despite the vendor -webkit- prefix, the multi-line rule works in Chrome 14+, Edge 17+, Firefox 68+, Safari 5+ and Safari on iOS 5+ — the tool lists these versions under the rule with a link to caniuse, its source — making it the widely supported way to cap multiline text without JavaScript.

Frequently asked questions

Why does the CSS use the -webkit- prefix?

The multiline clamp relies on the flexible box layout mode addressed by the -webkit- prefixed properties, which every current browser recognizes for this pattern, so the generated code works without any extra fallback.

Why isn't my text getting truncated?

Line-clamp only kicks in when the element is block-level, has a limited width so the text wraps onto multiple lines, and the content is longer than the line limit. Make sure overflow is hidden and the container width is constrained, exactly as shown in the generated rule.

Can I preview it at my own font size, or get it as Tailwind or React?

Yes. Set the font size, line height and width the preview is drawn at. The output can be plain CSS, a Tailwind class or a React style object, and an option adds the max-height that goes with the clamp.

Does it tell me whether my text is actually cut, and which browsers support the rule?

Yes. Under the preview a line says what the rule does to your text at this setting: how many lines it runs to and how many are hidden behind the ellipsis, or that it fits and nothing is cut. It is measured again whenever the preview box changes size. Under the multi-line rule the page lists the first version of Chrome, Edge, Firefox, Safari and Safari on iOS that honours it, prefix and all, with a link to caniuse as the source.

Can I preview the clamp in a different typeface?

Yes. “Preview typeface” draws the preview in this site's own face, a generic family such as serif or monospace, or a face that comes installed on devices — Arial, Helvetica, Verdana, Georgia, Times New Roman, Courier New, Malgun Gothic and Apple SD Gothic Neo among them. Each is written with its generic family behind it, which is what a device without that face draws instead, and the sample text box follows the same face, so what you type matches what is clamped. The typeface is for the preview only and is not written into the rule; web fonts are left out because they would silently fall back to another face.