How do I truncate text to multiple lines in CSS?

Use the -webkit-box clamp pattern. For three lines write display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; on the element. The browser keeps the first three lines and replaces the overflow with a single ellipsis. The parent needs a real width so the text wraps, and the clamped element should be block or grid rather than inline. This generator writes the whole block for any line count and shows it cutting in the live preview.

Is -webkit-line-clamp safe to use in production?

Yes. Despite the -webkit- prefix it works in Chrome, Edge, Safari, Firefox and every modern mobile browser, because all of them implement the original WebKit box behaviour. It has shipped for years and powers card titles and previews on most large sites. For extra future proofing this tool also emits the unprefixed standard line-clamp: N property, which newer engines read directly. Keep both lines and you cover old and new at once.

When should I use a single-line ellipsis instead?

Use text-overflow: ellipsis when you only ever want one line, for example a filename, a tag or a table cell. The recipe is overflow: hidden; white-space: nowrap; text-overflow: ellipsis; and it is lighter and more reliable than a -webkit-box because it never touches flex layout. Set lines to one in this tool and it switches to that recipe automatically and notes why it is the better choice for a single line.

What is the standard line-clamp property?

line-clamp without the -webkit- prefix is the W3C proposal that turns the old WebKit hack into a real property. Modern browsers are adopting it, so writing line-clamp: 3 next to -webkit-line-clamp: 3 lets newer engines read the clean property while older ones fall back to the prefixed one. This tool outputs both by default; untick the standard option if you want the classic webkit-only block.

How do I clamp lines with Tailwind CSS?

Tailwind 3.3 and later ship line-clamp in core, so you just add line-clamp-3 to an element for a three line clamp, or line-clamp-none to remove it. Values one through six have named utilities; beyond six use the arbitrary syntax line-clamp-[8]. This tool prints the exact class for your chosen line count next to the raw CSS, so you can copy whichever fits your stack.

Why is my line clamp not truncating the text?

The three usual causes: the container has no fixed or constrained width so the text never wraps, the element is inline rather than block so -webkit-box has nothing to lay out, or another rule sets overflow back to visible. Check that overflow: hidden survives, that the element is a block, and that a width or max-width is in effect. The preview here uses a fixed width block so you can confirm the pattern works before pasting it into your own layout.

Clamp card titles and descriptions in a feed

A product grid or blog feed needs every card the same height no matter how long the title runs. Clamp the title to two lines and the description to three, and a forty word headline collapses to a tidy two line block with an ellipsis instead of pushing the card taller than its neighbours. Copy the two CSS blocks straight into your card styles.

Keep table cells and list rows one line tall

A column of file names or email subjects looks broken the moment one entry wraps. Set lines to one, grab the text-overflow: ellipsis recipe, and every cell stays a single line with a trailing ellipsis on the long ones. The tool flags that single-line truncation does not need the heavier -webkit-box pattern.

Truncate previews in a Tailwind project

You are styling a comment preview in a Tailwind app and want three lines maximum. Instead of hand writing the webkit prefixes, read the line-clamp-3 class off this tool and drop it on the element. Change the line count and the class updates, so you can compare two and three lines before committing.

Decide between two and three lines with a real preview

Designers argue about whether a summary should clamp at two or three lines. Paste the actual copy into the sample box, toggle the line count, and watch where each option cuts. Seeing the real ellipsis on real text settles the question faster than guessing from a spec, and the shareable URL lets you send the exact setup to a teammate.

CSS Line Clamp Generator for Multi-line Truncation

Truncate text after N lines with a trailing ellipsis, copy the CSS and the Tailwind class, with live preview, browser-only

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Lines to show

Text past this many lines collapses into a trailing …

Include standard line-clampline-clamp

Add the W3C line-clamp property alongside the -webkit- prefix

Sample text

Edit freely — the box width is fixed so you can see where it cuts

Live preview

A board foot is a unit of volume equal to a one-foot length of a board one foot wide and one inch thick. Carpenters price rough hardwood by it, and the formula divides thickness times width times length by twelve. This paragraph is long enough that any clamp from one to a handful of lines will visibly cut it off with an ellipsis.

CSS

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
line-clamp: 3;

CSS (in a class)

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

Tailwind

line-clamp-3

What this tool does

A CSS line clamp generator that turns long text into a clean N-line block ending in a single ellipsis. Pick how many lines to keep and the tool writes the full recipe for you: the widely supported -webkit-box method (display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: N) plus the modern standard line-clamp property as a forward-looking fallback. Set lines to one and it switches to the lighter single-line text-overflow: ellipsis recipe, which needs no flex box at all. A live preview with editable sample text and a fixed width box shows exactly where the cut lands, so you never ship a clamp that quietly fails to truncate. Copy plain CSS, CSS wrapped in a class, or the matching Tailwind utility (line-clamp-3 and friends) with one click. The line count rides in the URL, so a shared link reopens your exact setup. Everything runs in the browser with no upload and no tracking.

Tool details

Input: Text + Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 9 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Line Clamp Generator fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Clamp card titles and descriptions in a feed
A product grid or blog feed needs every card the same height no matter how long the title runs. Clamp the title to two lines and the description to three, and a forty word headline collapses to a tidy two line block with an ellipsis instead of pushing the card taller than its neighbours. Copy the two CSS blocks straight into your card styles.
Keep table cells and list rows one line tall
A column of file names or email subjects looks broken the moment one entry wraps. Set lines to one, grab the text-overflow: ellipsis recipe, and every cell stays a single line with a trailing ellipsis on the long ones. The tool flags that single-line truncation does not need the heavier -webkit-box pattern.
Truncate previews in a Tailwind project
You are styling a comment preview in a Tailwind app and want three lines maximum. Instead of hand writing the webkit prefixes, read the line-clamp-3 class off this tool and drop it on the element. Change the line count and the class updates, so you can compare two and three lines before committing.
Decide between two and three lines with a real preview
Designers argue about whether a summary should clamp at two or three lines. Paste the actual copy into the sample box, toggle the line count, and watch where each option cuts. Seeing the real ellipsis on real text settles the question faster than guessing from a spec, and the shareable URL lets you send the exact setup to a teammate.

Common pitfalls

Forgetting that the container needs a real width. -webkit-line-clamp only truncates once the text actually wraps, so an element with no width or an inline display will show every line. Give it a block display and a width or max-width before expecting a clamp.
Dropping overflow hidden. The clamp count alone does nothing if overflow stays visible; the hidden value is what hides the lines past the limit and triggers the ellipsis. Keep all four declarations together rather than copying only -webkit-line-clamp.
Reaching for -webkit-box when you only need one line. A single-line truncation should use overflow hidden, white-space nowrap and text-overflow ellipsis. The -webkit-box pattern adds flex behaviour you do not need and can interact badly with padding and inline children.

Privacy

The generator is plain JavaScript that runs in your browser tab. The sample text you type, the line count and the generated CSS never leave the page, and nothing is logged. The only thing that travels is the line count in the shareable URL query string, which a recipient server would see in its access log if you paste the link into chat. The sample text itself is local state and is never encoded into the URL, so editing it is always private.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Line Clamp Generator for Multi-line Truncation

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Line Clamp Generator fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Clamp card titles and descriptions in a feed

Keep table cells and list rows one line tall

Truncate previews in a Tailwind project

Decide between two and three lines with a real preview

Common pitfalls

Privacy

FAQ

CSS clamp() Fluid Typography Generator

CSS Formatter & Minifier

CSS Box Shadow Generator

PX REM EM Converter

AI Eval Planner

API Key Generator

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet

AWS CLI Cheatsheet

Backup Codes Generator

Barcode Generator