CSS line-clamp: Truncate Multi-Line Text with Ellipsis

The CSS line-clamp property allows developers to limit the rendering of a text block to a specified number of lines, automatically appending an ellipsis (...) at the truncation point. This article explains how the property operates under the hood, the mandatory companion properties required to make it work, a practical implementation example, and key caveats to keep in mind when styling multi-line content.

How line-clamp Works

Standard CSS properties like text-overflow: ellipsis only work on single-line text containers using white-space: nowrap. To handle multi-line truncation, browsers implement line-clamp (most reliably through -webkit-line-clamp).

When applied, the rendering engine creates an internal boundary based on the specified number of visible lines. Once the text exceeds this line count, the rendering engine clips the remaining content and automatically substitutes the final visible characters on the last line with an ellipsis character (…).

The Required Companion Properties

The line-clamp property cannot function independently. It is tied to the legacy WebKit Flexible Box Layout model. For truncation to render properly across modern browsers, you must declare four properties together:

  1. display: -webkit-box: Activates the legacy WebKit flexbox model required for line-level measurement.
  2. -webkit-box-orient: vertical: Sets the orientation of the flexbox container to vertical, enabling line counting from top to bottom.
  3. -webkit-line-clamp: <number>: Specifies the maximum number of text lines displayed before truncation occurs.
  4. overflow: hidden: Hides any text or child elements that extend beyond the defined line count.

Practical Implementation

Below is a standard CSS pattern used to truncate a paragraph after three lines:

.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
<p class="truncate-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Key Considerations

  • Padding Issues: Avoid applying padding-bottom to the clamped container. Padding is rendered inside the box, meaning text that should be hidden might peek through below the ellipsis.
  • SEO and Accessibility: Content truncated by line-clamp remains fully accessible in the Document Object Model (DOM). Screen readers and search engine crawlers can still read the entire text block, as only the visual presentation is clipped.
  • Unprefixed vs. Prefixed: Although line-clamp is part of the CSS Overflow Module Level 3 specification, browser engines still rely on the -webkit- vendor prefix for stable multi-line clipping behavior. Including both -webkit-line-clamp and the standard line-clamp ensures current compatibility and future-proofing.