CSS Line Clamp Generator
Generate ellipsis and line-clamp CSS for overflowing text.
Truncate text with a clean ellipsis
Cutting a card description or preview to a fixed number of lines with a trailing ellipsis is a common need and a fiddly bit of CSS involving -webkit-line-clamp and a few supporting properties. This generator builds that recipe for you from a single line-count input.
Getting all the required properties right by memory is error-prone, so a ready snippet saves the trip to documentation. Set how many lines to allow and copy the CSS onto any text container to clamp overflow neatly.
Copy-ready line-clamp
The clamp relies on -webkit-line-clamp with display: -webkit-box, which is widely supported despite the prefix. The CSS is generated in your browser.
Frequently asked questions
Which CSS does line clamping need?
Four declarations together: display: -webkit-box, -webkit-line-clamp set to your line count, -webkit-box-orient: vertical, and overflow: hidden. Removing any one of them breaks the clamp.
Does -webkit-line-clamp work in Firefox?
Yes. Despite the prefix, it works in all current major browsers, including Firefox.
Is clamped text hidden from screen readers?
No. The full text stays in the page and is read aloud, but sighted users only see the clamped lines. Provide a "Read more" link if the hidden part matters.
Related tools
Practical utilities for front-end design and implementation work.