CssHow-ToBeginner · 3 min read

How to Truncate Multiline Text in CSS: Simple Guide

To truncate multiline text in CSS, use display: -webkit-box;, -webkit-line-clamp to set the number of lines, and overflow: hidden; with -webkit-box-orient: vertical;. This combination hides extra lines and adds an ellipsis after the specified line count.

📐

Syntax

Here is the CSS pattern to truncate multiline text:

display: -webkit-box; creates a flexible box container.
-webkit-line-clamp: N; limits text to N lines.
-webkit-box-orient: vertical; sets the box orientation to vertical.
overflow: hidden; hides the overflowing text.

css

selector {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

💻

Example

This example shows a paragraph truncated after 3 lines with an ellipsis.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Multiline Truncate Example</title>
<style>
  .truncate {
    width: 300px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Arial, sans-serif;
    line-height: 1.4rem;
    font-size: 1rem;
  }
</style>
</head>
<body>
  <p class="truncate">
    This is a long paragraph that will be truncated after three lines. The extra text beyond the third line will not be visible, and an ellipsis will appear to indicate the truncation.
  </p>
</body>
</html>

Output

A paragraph box about 300px wide showing only the first 3 lines of text with an ellipsis at the end.

⚠️

Common Pitfalls

Common mistakes when truncating multiline text include:

Not setting display: -webkit-box;, which is required for -webkit-line-clamp to work.
Forgetting -webkit-box-orient: vertical;, which controls the vertical layout.
Using text-overflow: ellipsis; alone, which only works for single-line truncation.
Not setting a fixed width or max-width, causing the text container to expand and not truncate.

css

/* Wrong way: single-line ellipsis only */
.truncate-wrong {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right way: multiline truncate */
.truncate-right {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

📊

Quick Reference

Summary tips for multiline text truncation:

Use -webkit-line-clamp with display: -webkit-box.
Set -webkit-box-orient: vertical for vertical text flow.
Always add overflow: hidden to hide extra text.
Define a fixed width or max-width on the container.
This method works best in WebKit-based browsers but has good support in modern browsers.

✅

Key Takeaways

Use -webkit-line-clamp with display: -webkit-box and -webkit-box-orient: vertical to truncate multiline text.

Always set overflow: hidden and a fixed width to ensure truncation works.

text-overflow: ellipsis alone only truncates single-line text, not multiline.

This CSS technique works well in modern browsers but relies on WebKit properties.

Test truncation on different screen sizes for responsive design.