CSS Line-Clamp Generator (Truncate Text to N Lines)
Generate the CSS to truncate text to a set number of lines with an ellipsis using -webkit-line-clamp, with a live preview — runs 100% in your browser, no upload.
CSS line-clamp generator
Preview
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}🔒 Generated in your browser — nothing is uploaded.
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. 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. A live preview shows your own sample text clamped to the chosen number of lines so you can confirm the result before copying.
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, line-clamp is widely supported across modern Chrome, Edge, Safari and Firefox, making it the standard 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. Modern browsers accept the prefixed form, 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.
Is anything I type uploaded to a server?
No. The line count, your sample text and the generated CSS are all processed locally in your browser with JavaScript. Nothing is sent, stored or uploaded anywhere.