Recreating MDN's Truncated Text Effect

Understanding Text Truncation in CSS

Text truncation serves as an essential tool in modern web design, enabling developers to create clean, consistent user interfaces when displaying variable-length content. Whether you're building card components, article previews, or list items with descriptions, controlling how text overflows maintains visual harmony and prevents layout breakage.

Single-Line Truncation with text-overflow

For single-line text truncation, CSS provides the straightforward text-overflow property. This approach works with any block container that has a defined width and uses overflow: hidden along with white-space: nowrap. The property supports several values including ellipsis, which adds the familiar three-dot indicator, and clip, which simply cuts off the text without any visual cue.

The simplicity of single-line truncation makes it ideal for navigation items, table cells, and any component where you need to ensure text doesn't wrap to multiple lines.

The Need for Multi-Line Truncation

Multi-line truncation presents a significantly more complex challenge for web developers. Unlike single-line truncation, CSS lacks a native property that simply works across all browsers for limiting content to a specific number of lines with an ellipsis or fade effect.

Modern browsers have introduced the line-clamp property through the CSS Overflow Module Level 4 specification, providing a standards-based approach to multi-line truncation. For related CSS layout techniques that can help you create robust interfaces, explore our guide on CSS Grid fundamentals alongside your truncation implementation. However, browser support remains inconsistent, requiring developers to understand both the modern approach and legacy techniques for maximum compatibility. CSS-Tricks' comprehensive comparison of truncation techniques helps clarify these differences.

The MDN Fade-Out Gradient Technique

MDN Web Docs, after their 2022 redesign, implemented an elegant approach to text truncation that goes beyond the simple ellipsis. Their technique uses a CSS gradient applied to a pseudo-element, creating a smooth fade-out effect that visually indicates content continues beyond what fits.

This approach offers several advantages over traditional ellipsis-based truncation. The fade effect feels more natural in modern interfaces, particularly when used with card designs or content previews where the transition between visible and hidden content should feel seamless rather than abrupt.

The Core CSS Technique

The fundamental CSS for the MDN-style fade-out effect combines several properties working in harmony:

• max-height: Establishes a maximum height for the text container
• overflow: hidden: Clips any content beyond the maximum height
• position: relative: Creates positioning context for the pseudo-element
• ::after pseudo-element: Contains the gradient overlay

.card-content {
 max-height: calc(4rem * var(--base));
 overflow: hidden;
 position: relative;
}

.card-content::after {
 content: "";
 background: linear-gradient(to right, transparent, var(--background) 80%);
 display: block;
 height: calc(1rem * var(--base) + 1px);
 inset-block-end: 0;
 position: absolute;
 width: 100%;
}

The pseudo-element configuration is critical to the effect's appearance. The gradient should start with complete transparency at the top and transition to the background color at the bottom, creating the illusion that the text is fading into the container's background. Adjusting the gradient's stops allows you to control the strength and positioning of the fade effect. Understanding how CSS pseudo-elements work can help you master these techniques for your own projects. CSS-Tricks' detailed breakdown of this implementation provides additional insights into optimizing the visual result.

Modern CSS line-clamp Property

The line-clamp property represents CSS's native solution for multi-line text truncation. As part of the CSS Overflow Module Level 4 specification, it provides a declarative way to limit content to a specific number of lines without requiring the complex pseudo-element techniques that were previously necessary.

For a deeper dive into this specific property, our guide on CSS line-clamp covers advanced usage patterns and browser compatibility considerations. This standards-based approach simplifies your CSS and ensures better performance across browsers.

Syntax and Usage

The property accepts either the keyword value none, which disables clamping, or an integer value specifying the exact number of lines to display. When combined with overflow: hidden, the content beyond the specified line count becomes invisible, with an ellipsis automatically inserted at the truncation point.

For the property to function correctly, you must also set display to -webkit-box or -webkit-inline-box and box-orient to vertical. While these prefixed properties suggest legacy support requirements, this configuration represents the fully specified behavior that browsers continue to support for compatibility reasons. MDN Web Docs' official reference provides the complete syntax and implementation details.

Performance Considerations

Implementing text truncation affects several aspects of page performance that modern web developers must consider.

Rendering Impact

The pseudo-element approach requires additional rendering work from the browser. Each pseudo-element must be composited and positioned, adding minor overhead to the rendering pipeline. The line-clamp property, being a native CSS feature, generally performs better because browsers can optimize its implementation at the layout engine level.

Layout Stability

CLS (Cumulative Layout Shift) becomes a concern when truncation state changes based on viewport size or dynamic content loading. To minimize layout shifts, ensure truncated containers have fixed or predictable maximum heights that remain consistent regardless of actual content length. If you're experiencing height-related issues, our guide on 100% height problems provides solutions for common layout challenges.

Best Practices

1. Choose based on requirements: Select the technique based on browser support needs and visual design goals
2. Implement responsive truncation: Adjust line counts across breakpoints using media queries
3. Test thoroughly: Test across browsers with actual content, not just placeholder text
4. Consider accessibility: Ensure truncation doesn't hide important information from assistive technology users

Sources

1. CSS-Tricks: Recreating MDN's Truncated Text Effect
2. MDN Web Docs: line-clamp CSS Property
3. CSS-Tricks: line-clamp Almanac
4. CSS Overflow Module Level 4 Specification