Zero Signup ToolsFree browser tools

Generator Tools

CSS Line Clamp Generator

Generate the CSS line-clamp rule for multi-line text truncation. Live preview, lines, width, font controls, plus Tailwind and JSX snippets.

Quick presets

Controls

Lines3 lines
Container width360px
Font size16px
Line height1.5

Font family

The selector that wraps the rule in copy outputs. Use a class like .clamp, an element like p.summary, or anything else valid.

Live preview

3 lines at 360px

Line clamp lets you collapse a long paragraph into a fixed number of visible lines and add an ellipsis at the cut, so cards, list items, and preview tiles stay the same height even when the source text has very different lengths. Edit the lines, width, font, and sample text on the left to see exactly how your CSS will render in the live preview below.

The dashed box marks the container width. The clamped paragraph uses the same CSS that will be copied below, so the preview matches the exported rule exactly.

353 characters, 66 words. Long enough text is needed to trigger truncation; very short text will show in full.

Recommended CSS

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

Pastes into any stylesheet. Includes the -webkit-box fallback so the rule works in Safari, iOS Safari, and every evergreen browser.

Tailwind utility

line-clamp-3

Add the class to your element. Tailwind v3.3+ ships line-clamp-1 through line-clamp-6 as core utilities.

Modern-only CSS

.clamp {
  line-clamp: 3;
  overflow: hidden;
}

Drops the -webkit-box fallback. Smaller rule, but evergreen Chromium and Firefox only. Use this when you do not need to support older Safari.

JSX / React inline style

style={{
  display: "-webkit-box",
  WebkitBoxOrient: "vertical",
  WebkitLineClamp: 3,
  lineClamp: 3,
  overflow: "hidden",
  textOverflow: "ellipsis",
}}

Drop into a React or Next.js element. React uses camelCased keys for the -webkit-* properties (WebkitBoxOrient, WebkitLineClamp).

HTML demo

<style>
.clamp {
  width: 360px;
  font-size: 16px;
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<p class="clamp">Line clamp lets you collapse a long paragraph into a fixed number of visible lines and add an ellipsis at the cut, so cards, list items, and preview tiles stay the same height even when the source text has very different lengths. Edit the lines, width, font, and sample text on the left to see exactly how your CSS will render in the live preview below.</p>

Self-contained snippet with the rule, the container width, and your sample text. Paste straight into a CodePen, JSFiddle, or scratch HTML file.

Notes on browser support and behavior

  • Single-line case: when you set Lines to 1 the tool emits the simpler classic truncation pattern (white-space: nowrap; overflow: hidden; text-overflow: ellipsis). The -webkit-box trick is only needed when you clamp 2 or more lines.
  • -webkit-box fallback: current Chromium, Firefox, and Safari all support the legacy -webkit-box pattern. Keeping it alongside the standalone line-clamp covers older Safari and iOS Safari builds you may still see in analytics.
  • Overflow hidden: the ellipsis only appears when the parent has overflow: hidden. Skipping it makes the text spill out instead of truncating.
  • Width matters: the number of lines is measured against the container width, font size, and line height. Resize the container or change the font to see how the cut moves; the preview above mirrors the exact result.
  • Tailwind core: Tailwind v3.3+ ships line-clamp-1 through line-clamp-6 plus line-clamp-none as core utilities (the @tailwindcss/line-clamp plugin is no longer needed). The tool emits the named utility for those values and an arbitrary-value class for 7 or more lines.
  • Local only: the rule, preview, and sample text live in your browser. Nothing is uploaded to a server.

Current configuration

Lines
3
Container width
360px
Font size
16px
Line height
1.50
Font family
System sans
CSS selector
.clamp

How to use

  1. Pick a quick preset (Card blurb, List item, Single line, Article summary, Code snippet) or set Lines, Container width, Font size, Line height, and Font family by hand.
  2. Edit Sample text on the right to test with real copy. Long enough text is needed to trigger truncation; very short text shows in full.
  3. Read the live preview inside the dashed container guide. The rendered paragraph uses the same CSS that will be copied, so the preview matches the exported rule exactly.
  4. Set CSS selector to the class or element you want wrapped in the rule (default .clamp).
  5. Click Copy CSS for the cross-browser rule, Copy class for the Tailwind utility, Copy style for the JSX inline-style object, or Copy HTML for a self-contained sandbox snippet.

About this tool

CSS Line Clamp Generator builds the rule that truncates a paragraph after a chosen number of lines and appends a horizontal ellipsis. Pick a line count from 1 to 10, set the container width, font size, line height, and font family, then watch the live preview render the exact CSS the tool will copy. For 1 line the tool emits the simpler classic truncation pattern (white-space: nowrap; overflow: hidden; text-overflow: ellipsis); for 2 or more lines it emits the cross-browser pattern with the -webkit-box fallback (display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: N) alongside the standalone line-clamp shorthand from CSS Overflow Module Level 3, so the rule works in evergreen Chromium, Firefox, current Safari, and older Safari and iOS Safari builds. Five outputs are ready to copy: a Recommended CSS block with the cross-browser fallback, a Modern-only CSS block for evergreen-only projects, a Tailwind v3.3+ utility class (line-clamp-1 through line-clamp-6 as core utilities; an arbitrary-value class for 7 or more lines), a JSX inline-style snippet using the camelCased WebkitBoxOrient and WebkitLineClamp keys React requires, and a self-contained HTML demo that includes the rule, the container, and your sample text for pasting straight into a CodePen or scratch HTML file. Five quick presets cover the everyday jobs: card blurb (3 lines), list item (2 lines), single-line truncate, magazine article summary (4 lines), and code snippet (5 lines). The selector input lets you pick the exact CSS selector that wraps the rule (.clamp, p.summary, .card__body, anything else valid) so the copied output drops straight into your stylesheet without manual editing. Useful for marketing cards, product grids, blog listings, comment previews, email subject lines, social media post previews, chat message snippets, search result snippets, and any UI surface where the source text length varies but the visible height must stay fixed. Everything runs locally in your browser. The text, configuration, and generated CSS never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Generator

CSS Gradient Generator

Linear, radial, and conic gradients with multi-stop editor and live preview.

Open tool

Generator

CSS Clamp Generator

Build clamp() for fluid type and spacing with a live viewport preview.

Open tool

Generator

CSS Box Shadow Generator

Layered box-shadow with live preview, opacity, inset, and Tailwind output.

Open tool

Generator

CSS Text Shadow Generator

Visual editor for stacked CSS text-shadow with neon, retro, and outline presets.

Open tool

Generator

CSS Filter Generator

Visual CSS filter builder with live preview, presets, and copy-ready output.

Open tool

Converter

Pixels to REM Converter

Bidirectional pixel and rem or em converter with batch mode and a reference chart.

Open tool

All toolsGenerator Tools