CSS Line Clamp Generator
Generate line-clamp CSS to truncate text after a set number of lines, with the single-line variant, the height reserved by the clamp and the accessibility caveats that apply.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Multi-line truncation had no proper solution for years
Cutting text after one line has been possible for a long time with text-overflow. Cutting after three required either a JavaScript measuring loop, a fade-out gradient hiding the overflow, or a server-side character count that guessed wrong whenever the font or width changed. The line-clamp property solved it, and although it still carries a vendor prefix and requires a specific combination of declarations, it is supported everywhere and is the correct answer now.
The declarations only work together
Line clamping needs display set to the webkit box layout, a box-orient of vertical, the clamp count, and overflow hidden. Removing any one of them silently disables the truncation rather than producing an error, which is why the combination is so often copied wrongly. It also changes the element's display type, so a clamped element cannot simultaneously be a flex or grid container, and that catches people out when they clamp something that was already laid out.
The text is still there
Clamping hides text visually and leaves it in the document. Screen readers still announce the full content, search engines still index it, and selecting the area still copies all of it. That is usually an advantage, and it means a clamp is not a way to hide information. Where the full text matters to the reader, an expand control is needed, and the title attribute is not an adequate substitute since it does not appear on touch devices at all.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why does my line clamp not work?
Because one of the four required declarations is missing. Line clamping needs the webkit box display, vertical box orientation, the clamp count and overflow hidden, and removing any one silently disables it rather than producing an error.
Can a clamped element also be a flex container?
No. Clamping sets the display property to the webkit box value, so the element cannot simultaneously be flex or grid. Wrap it in another element if you need both.
Is clamped text hidden from screen readers?
No. The text remains in the document, so screen readers announce all of it, search engines index it and selecting the area copies everything. A clamp is a visual treatment, not a way to hide information.
How do I reserve the right height?
Multiply the line height by the clamp count. Setting that as a min-height stops the layout shifting when short text does not fill the clamp, which is the usual cause of uneven card grids.
Should I add a tooltip with the full text?
The title attribute does not appear on touch devices and is announced inconsistently, so it is not a solution on its own. An expand control is the reliable option where the full text genuinely matters.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose a line count and font settings to generate the truncation CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.