Skip to content
TextArray1.87.0
100% local

CSS line-clamp generator

Generate a CSS rule that truncates text after a set number of lines, with an ellipsis or a fade.

Output
Related tools
CSS clamp() generatorDeveloper tools
Truncate textText manipulation
CSS text-shadow generatornewDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS line-clamp generator
Card titles, product descriptions and comment previews all need the same trick eventually: show a few lines of text and cut the rest off cleanly instead of letting a long paragraph blow out the layout. This generator writes that CSS rule for you, ready to paste into a stylesheet as a ".line-clamp" class.
Choose single-line mode for a one-line truncation — the classic "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" combination used for titles and table cells — or multi-line mode, which uses "-webkit-line-clamp" to cut off after however many lines you set, honoring the line-height you choose. Turn on the fade option to soften the last line into the background with a gradient instead of a hard ellipsis, which reads better over an image or a colored card. The fallback option adds an "@supports" block so browsers without line-clamp support still get a sensible max-height cutoff rather than an unclipped wall of text, and the Tailwind option appends the matching utility class ("truncate" or "line-clamp-N") as a comment so you don't have to look it up.
Type or paste a sentence into the preview field and the tool estimates how your text would break across the chosen number of lines, so you can sanity-check the line count before you commit to a design. The estimate is based on an average reading-line length rather than measuring real fonts and containers — it's a guide for picking a sensible line count, not a pixel-accurate render.
Everything runs locally in your browser: the CSS is generated as you type, nothing is uploaded anywhere, and you can copy the result, download it as a .txt file, or send it straight into another tool's input to keep working on it.
FAQ
What is the difference between single-line and multi-line clamping?
Single-line uses text-overflow: ellipsis with white-space: nowrap and works in every browser. Multi-line uses -webkit-line-clamp to cut off after a chosen number of lines, which needs the display: -webkit-box setup this tool generates for you.
Why does the fade option remove -webkit-line-clamp?
A gradient fade needs a fixed max-height and a positioned pseudo-element, not the line-clamp box model, so the tool switches to a max-height-based rule whenever fade is on — for both single- and multi-line modes.
Do I still need the fallback for modern browsers?
All current major browsers support -webkit-line-clamp, so the fallback mainly protects older or unusual browsers. It is harmless to leave on: it only applies inside an "@supports not" block that modern browsers ignore.
How accurate is the preview?
It is an estimate based on an average line length, not a measurement of your actual font or container width. Use it to judge whether your chosen line count feels right, then check the real result in your page.
Is my preview text uploaded anywhere?
No. The CSS and the preview are generated entirely in your browser — nothing you type is sent to a server.