How to Limit Text to N Lines in CSS with Ellipsis

By the end of this page, you will understand how multi-line text truncation works in CSS, why text-overflow: ellipsis only handles one line by default, and how to use line clamping techniques such as -webkit-line-clamp to limit text to a fixed number of lines.

Single-line truncation and multi-line truncation are related, but they are not the same feature.

For one line, CSS truncation is straightforward:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

This works because the browser keeps everything on one line and hides anything that does not fit horizontally.

For multiple lines, the browser needs a different rule: it must allow wrapping, count visible lines, and then stop rendering after a certain number of lines. That is where line clamping comes in.

A common CSS approach is:

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

This tells the browser:

• lay out the text in a vertical box
• allow multiple lines
• show only a fixed number of lines
• hide the rest

Why this matters in real programming:

• card layouts often need titles and descriptions with equal height
• article previews need a clean summary length
• product grids should not break because one item has much longer text
• mobile layouts need predictable text blocks

Without line clamping, long content can stretch containers and make a UI look uneven.

Think of a text container like a small window.

• With single-line ellipsis, the window is only one row high.
• With multi-line clamping, the window is two or three rows high.
• Anything below that window is hidden.

So instead of saying, "cut text after this number of characters," CSS is really saying, "show only this much visible space." That is an important difference.

CSS usually does visual truncation, not text editing. The original text still exists in the HTML; the browser just stops showing part of it.

The most common CSS solution for multi-line truncation is line clamping.

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

Example HTML:

<p class="description">
  Ultrices natoque mus mattis, aliquam, cras in pellentesque
  tincidunt elit purus lectus, vel ut aliquet, elementum nunc
  nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
  mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit
</p>

What each property does:

• display: -webkit-box; enables an older flexible box layout mode used for this feature
• -webkit-box-orient: vertical; stacks content vertically
• -webkit-line-clamp: 2; limits visible text to 2 lines
• overflow: hidden; hides extra text

A more complete example:

.card-text {
  width: 300px;
  font-size: 16px;
  line-height: 1.4;

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

If you only want simple clipping without caring about ellipsis behavior, another older fallback is using a fixed height:

.clipped {
  line-height: 1.5;
  max-height: 3em; /* about 2 lines if line-height is 1.5 and font-size is 1em */
  overflow: hidden;
}

But this is less precise and does not provide a true built-in ellipsis in the same way.

Consider this example:

<p class="excerpt">
  This is a long paragraph that should only appear across two lines in the layout, and the rest should be hidden from view.
</p>

.excerpt {
  width: 220px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

What happens step by step:

1. The browser reads the paragraph text.
2. Because the width is 220px, the text wraps into multiple lines.
3. display: -webkit-box changes how the content is laid out for clamping.
4. -webkit-box-orient: vertical tells the browser to stack lines vertically.
5. -webkit-line-clamp: 2 says only 2 lines may be shown.
6. overflow: hidden hides any content after the second line.

Without overflow: hidden, extra text may still be visible.

Without -webkit-line-clamp, the browser will not know how many lines to keep.

Without a constrained width, the text may not wrap the way you expect, so line count can change.

Multi-line text truncation is common in many interfaces:

• Blog cards: show only 2 or 3 lines of summary text
• Product listings: prevent one long product description from stretching the layout
• News feeds: keep preview cards visually consistent
• Mobile apps and responsive pages: fit text into tight spaces
• Search results: display short snippets without showing full content
• Dashboards: keep widgets aligned even when content length varies

Example: an e-commerce card

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

This keeps every product card looking the same height even if one description is much longer than the others.

In real projects, developers often combine line clamping with layout and content patterns.

Common patterns

• Card components: clamp titles or summaries so rows align neatly
• Responsive design: use different clamp values on different screen sizes
• Guarding layout stability: prevent user-generated content from breaking designs
• Progressive enhancement: use line clamp where supported, and allow normal wrapping or simple clipping as fallback

Example with responsive behavior:

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

@media (min-width: 768px) {
  .summary {
    -webkit-line-clamp: 3;
  }
}

In component-based codebases

Developers often wrap this into reusable utility classes:

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

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

This makes it easy to apply the behavior consistently across cards, modals, sidebars, and lists.

Here are some common problems beginners run into.

1. Expecting text-overflow: ellipsis to work on multiple lines by itself

Broken example:

.box {
  text-overflow: ellipsis;
}

Why it fails:

• text-overflow alone is not enough
• it mainly works for single-line overflow unless combined with other constraints

2. Forgetting overflow: hidden

Broken example:

.box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

Fix:

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

3. Using white-space: nowrap for multi-line truncation

Broken example:

.box {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Why it fails:

• nowrap forces the text into one line, which is the opposite of multi-line truncation

4. Not giving the text a width constraint

If the container is too wide, the text may stay on one line or wrap differently than expected.

.box {
  width: 250px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

5. Thinking CSS removes the hidden text from the document

CSS only changes what is visible. The full text is still present in the HTML and may still be available to scripts or assistive technologies depending on context.

Single-line vs multi-line

/* Single line */
.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multiple lines */
.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

Use single-line truncation for labels, filenames, and menu items.

Use multi-line truncation for descriptions, excerpts, and card content.

/* Single-line ellipsis */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line clamp */
.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

Quick rules:

• text-overflow: ellipsis is mainly for one line
• For multiple lines, use -webkit-line-clamp
• Always combine line clamp with overflow: hidden
• Make sure the container has a width or layout constraint so text can wrap
• CSS truncation is visual, not actual text removal

Fallback idea:

.fallback {
  line-height: 1.5;
  max-height: 3em;
  overflow: hidden;
}

Good use cases:

• card titles
• article excerpts
• product descriptions
• dashboard summaries

Can CSS truncate text after 2 lines?

Yes. The most common CSS approach is -webkit-line-clamp combined with display: -webkit-box, -webkit-box-orient: vertical, and overflow: hidden.

Why does text-overflow: ellipsis not work for multiple lines?

Because it is designed for single-line overflow behavior unless combined with line-clamping techniques. By itself, it does not count visible lines.

Is multi-line ellipsis supported in all browsers?

Support is generally good for modern browsers using the clamping approach, but behavior can vary. If support is critical, test in your target browsers and consider a fallback.

Can I clamp text to 3 or 4 lines instead of 2?

Yes. Just change the value:

-webkit-line-clamp: 3;

or

-webkit-line-clamp: 4;

Does CSS remove the hidden text from the HTML?

No. CSS only hides it visually. The original text remains in the document.

Should I use JavaScript instead of CSS for truncation?

Use CSS when you only need visual line limiting. Use JavaScript if you need exact control over characters, words, tooltips, or custom truncation rules.

What is the simplest fallback if line clamp is unavailable?

Use a fixed max-height based on line-height and add overflow: hidden. It will clip the text, though not as nicely as true line clamping.

• text-overflow — related because it handles ellipsis for single-line text
• overflow — important because hidden overflow is required for truncation
• white-space — controls whether text wraps or stays on one line
• line-height — useful when building height-based fallbacks
• responsive design — text clamping is often adjusted for different screen sizes
• CSS layout — width and container sizing affect where lines wrap
• JavaScript string truncation — useful when visual CSS truncation is not enough