Introduction
Text truncation is a fundamental CSS technique that every web developer needs to master. Whether you're building a card-based interface, a product listing, or a data table, you'll frequently encounter situations where long text needs to be cleanly cut off with an ellipsis (...) to maintain visual harmony and prevent layout breaks.
Modern CSS provides elegant, native solutions for text truncation that require no JavaScript and work reliably across all modern browsers. This guide covers both single-line and multi-line truncation techniques, explaining the underlying CSS properties, providing practical code examples, and sharing best practices for optimal performance.
The key CSS properties involved--text-overflow, overflow, white-space, and line-clamp--work together to create polished, professional-looking interfaces. Understanding how these properties interact unlocks the ability to build responsive, maintainable layouts that gracefully handle varying text lengths. For more CSS techniques, see our guide on CSS Border for styling container elements.
The text-overflow property in CSS determines how overflowed content that is not displayed should be signaled to users. When text content exceeds the dimensions of its container, text-overflow controls what visual indicator, if any, appears at the boundary where the text is cut off MDN Web Docs: text-overflow.
It's crucial to understand that text-overflow alone does not cause text to be clipped or truncated. For truncation to actually occur, the container must have overflow set to a value other than visible (typically hidden), and for single-line truncation, white-space must be set to nowrap to prevent natural text wrapping LogRocket: How to truncate text in CSS.
Single-Line Text Truncation
Single-line text truncation is the most common and straightforward use case for text-overflow. When you need to ensure that text displays on a single line with an ellipsis indicating overflow, the technique requires combining three CSS properties working in concert.
Required CSS Properties
.ellipsis-single {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
The overflow: hidden property prevents content from visible overflow outside the container boundaries--this is what actually clips the text. The white-space: nowrap property ensures that all text remains on a single line, preventing the browser from wrapping text to multiple lines based on available width. Finally, text-overflow: ellipsis tells the browser to display an ellipsis (...) at the point where the text would overflow LogRocket: How to truncate text in CSS.
Without all three of these properties working together, truncation will not occur. If overflow is visible (the default), the text will simply extend beyond the container. If white-space allows wrapping, the text will wrap to multiple lines rather than truncating. And without text-overflow, the text will simply be clipped without any visual indicator.
Custom Truncation Strings
Beyond the standard ellipsis, CSS allows you to specify custom strings to display at the truncation point. This can be useful for localization or for providing more explicit calls-to-action:
.custom-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: "→";
}
You can also use two-value syntax to specify different behavior for the start and end of the text for bidirectional text support:
.bidirectional-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: "[See more]" "[See more]";
}
Width Considerations
Single-line truncation is typically used in contexts where the container has a constrained width, such as table cells, navigation menus, or card components. The truncation occurs when the combined width of the text exceeds the available width of the container, accounting for padding and borders.
For responsive designs, you may need to adjust container widths using relative units (percentages, viewport units) or CSS Grid/Flexbox to ensure truncation occurs appropriately across different screen sizes. The truncation behavior will automatically adapt as the container width changes. When working with animated SVG elements, proper truncation ensures text labels remain readable--see our guide on How to Animate SVG with CSS for complementary styling techniques.
Multi-Line Text Truncation
Multi-line text truncation presents a greater challenge because the standard text-overflow property only works for single-line scenarios. For situations where you want to limit text to a specific number of lines (such as showing a two-line preview of a longer article), you need a different approach.
The WebKit Line Clamp Approach
The most widely supported method for multi-line truncation uses a combination of WebKit-prefixed properties. This approach, while requiring vendor prefixes, works consistently across Chrome, Safari, Firefox, and Edge:
.ellipsis-multiline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
The -webkit-line-clamp property specifies exactly how many lines of text should be displayed before truncation occurs. The -webkit-box display value and -webkit-box-orient: vertical combination creates a flexible box layout that constrains content to a specific number of lines CSS-Tricks: line-clamp.
The overflow: hidden property ensures that any content beyond the specified line limit is not visible. Unlike single-line truncation, you do not need to set white-space: nowrap for multi-line truncation--the -webkit-box layout handles the line limiting behavior.
How Line Clamp Works
The -webkit-line-clamp property is part of the CSS Overflow Module Level 3 specification, though it has historically been implemented with vendor prefixes. When you set -webkit-line-clamp to a number, the browser limits the content to that many lines and adds an ellipsis at the end of the last visible line if content exceeds the limit.
The -webkit-box display value creates a box that behaves like a block-level element but with flexbox-like characteristics. Setting -webkit-box-orient: vertical configures the box to arrange its contents vertically, stacking line boxes on top of each other. The combination of these properties creates a predictable truncation behavior that works reliably across browsers.
Browser Support
Browser support for the line clamp technique is excellent when using the WebKit prefix. Chrome, Safari, Firefox (version 68+), and Edge all support this approach. The -webkit- prefix is necessary because the standard line-clamp property has not yet achieved full standardization across all browsers CSS-Tricks: line-clamp.
For the most robust cross-browser experience, you should include the prefixed version. Many modern CSS frameworks and utility libraries include line-clamp utilities precisely because of this browser behavior. When using line clamp, test across target browsers to ensure consistent rendering.
Performance Considerations
CSS-based text truncation is highly performant compared to JavaScript-based alternatives because it relies on the browser's native rendering engine rather than DOM manipulation or string truncation algorithms. The browser can optimize text rendering and layout calculations efficiently.
Rendering Performance
When text truncates using CSS, the browser performs the truncation during the normal layout phase. This means there is no additional JavaScript execution overhead, no DOM modifications after initial rendering, and no need to recalculate text dimensions on window resize or content changes. The truncation adapts automatically as the layout changes LogRocket: How to truncate text in CSS.
Compared to JavaScript solutions that measure text dimensions and truncate strings manually, CSS truncation is significantly more efficient. JavaScript-based approaches often require debounced resize handlers and can cause layout thrashing when constantly measuring and modifying text content.
Memory and DOM Size
CSS truncation does not modify the DOM or reduce the amount of HTML content--the full text remains in the DOM but is simply hidden from view by CSS. This has implications for accessibility and SEO, as screen readers and search engines can still access the complete text content. This makes CSS truncation ideal for UI purposes where the full content exists in the DOM but should be visually constrained.
For very long content that should not be loaded at all (rather than just hidden), server-side truncation or lazy loading strategies may be more appropriate. Understanding how JavaScript and CSS interact is crucial--see our guide on Classes in JavaScript for best practices in component architecture.
Best Practices and Common Patterns
Card Component Patterns
Card components frequently use text truncation to maintain consistent card heights and prevent layout shifts. A common pattern combines a fixed-height or max-height container with single-line truncation for titles and multi-line truncation for descriptions:
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card-description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
This pattern ensures that even with varying text lengths, cards maintain a predictable appearance while still allowing users to see enough context to make informed decisions about clicking or reading more.
Table Data Truncation
In data tables, truncation is essential for maintaining column alignment and readability. Combining truncation with hover states that reveal full content provides a good balance of space efficiency and information accessibility:
.table-cell-truncate {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.table-cell-truncate:hover {
white-space: normal;
overflow: visible;
}
This pattern works well for tables with variable-length content where users may need to see full values occasionally but typically just need a preview.
Responsive Truncation
Responsive truncation can adapt to different screen sizes using CSS media queries. You might show fewer lines of truncated text on mobile devices where screen space is at a premium:
.responsive-truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.responsive-truncate {
-webkit-line-clamp: 2;
}
}
This approach ensures that truncation behavior adapts gracefully across device sizes, maintaining readability while preventing layout issues on smaller screens.
Flexbox and Grid Considerations
When truncating text within flex containers, you may need to apply truncation to a specific flex item and use min-width: 0 on the flex item to override the default behavior that prevents flex items from shrinking below their content size. In CSS Grid layouts, truncation works similarly but requires constrained grid track sizing for predictable behavior.
Accessibility Considerations
Screen Reader Behavior
Text truncated using CSS remains fully accessible to screen readers. The full text content is present in the DOM and will be read completely, regardless of the visual truncation. This is important for users who rely on assistive technology to access content MDN Web Docs: text-overflow.
If you want screen readers to announce truncation behavior explicitly, you may need to add aria-describedby or similar attributes to provide context about truncated content. However, for most use cases, the default behavior of reading the full content is preferable.
Keyboard Navigation and Focus
When truncation is applied to interactive elements like links or buttons, ensure that truncation does not interfere with keyboard navigation. The clickable area of truncated elements should remain accessible, and focus states should be clearly visible. Consider using a wrapper element that captures clicks when the inner content is truncated.
Alternative Text Presentation
For critical content that users must read in full, consider providing a "Read more" link or expanding mechanism rather than relying solely on truncation. This gives users control over accessing complete information while maintaining the benefits of truncated display for space-constrained layouts.
Building accessible web interfaces requires understanding how these CSS techniques integrate with broader development practices. Our web development services team combines modern CSS approaches with accessibility-first design to create interfaces that work for everyone.