CSS Line Clamp Generator
Cut text off after a chosen number of lines and add an ellipsis using pure CSS. Set the line count and copy the line-clamp rule, with a one-line alternative for single-line truncation.
How to generate line clamp CSS
- Set how many lines of text to keep before truncating.
- Preview how the clamped text looks at that line count.
- Copy the CSS and apply it to the text container.
Examples
Clamp to three lines
lines 3
-webkit-line-clamp: 3;
Single line
lines 1
-webkit-line-clamp: 1; (plus a white-space alternative)
Frequently asked questions
How does multi-line clamping work?
The container becomes a -webkit-box laid out vertically, line-clamp limits the number of visible lines, and overflow: hidden hides the rest while the browser adds an ellipsis.
Is -webkit-line-clamp widely supported?
Yes. Despite the -webkit- prefix it works across modern browsers including Firefox, so the prefixed form is the standard way to clamp text today.
Why is there a separate one-line option?
For a single line you can use white-space: nowrap with text-overflow: ellipsis, which is simpler and avoids the box model, so the tool includes that alternative when you pick one line.
Does the element need a fixed height?
No. Line clamp limits by line count, not height, so the element grows to the clamped number of lines and truncates anything beyond it.
Is anything sent to a server?
No. The CSS is generated entirely in your browser and your settings are never uploaded.
Related tools
CSS Clamp Generator
Generate a responsive CSS clamp() value for fluid font sizes and spacing. Set min and max sizes plus viewport bounds and copy the result.
Type Scale Generator
Generate a modular typographic scale from a base size and ratio. Get px and rem font sizes for every step, ready to drop into your CSS. Free and instant.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.