You'll often need to truncate text when working with user interfaces, especially when displaying content within a limited space. CSS provides a straightforward way to handle this scenario, ensuring that long text strings are cut off gracefully without affecting the overall layout.
CSS Truncation Techniques
Single-Line Truncation
If you want to truncate a single line of text, CSS provides a simple solution. The key properties to use here are overflow, white-space, and text-overflow.
.truncate {
white-space: nowrap; /* Prevent the text from wrapping to the next line */
overflow: hidden; /* Ensure content is clipped within the container */
text-overflow: ellipsis; /* Add ellipsis (…) when the text is truncated */
width: 200px; /* Adjust the width as needed */
}
Explanation of properties:
white-space: nowrap: This ensures the text stays on a single line, preventing wrapping.overflow: hidden: This hides any content that overflows the container.text-overflow: ellipsis: This adds the ellipsis (…) at the end of the truncated text.
Multi-Line Truncation
While truncating a single line of text is common, sometimes you may want to display multiple lines but still cut off the text when it exceeds a certain number of lines. You can use a combination of CSS properties such as -webkit-line-clamp along with the display and overflow properties.
.multi-line-truncate {
display: -webkit-box;
-webkit-line-clamp: 3; /* Limit to 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Live example:
Explanation of properties:
display: -webkit-box: This is a legacy flexbox-like display property that works with the -webkit-line-clamp property.-webkit-line-clamp: Specifies the number of lines to show before truncating.-webkit-box-orient: vertical: Ensures the box is laid out vertically for proper multi-line truncation.overflow: hidden: Prevents content overflow.text-overflow: ellipsis: Adds an ellipsis after the truncated content.
Why Use CSS for Text Truncation Over JavaScript Techniques?
While it’s possible to truncate text using JavaScript, CSS is often a better choice for this task for several reasons. Let's explore why CSS-based truncation techniques are generally preferred over JavaScript.
Performance Efficiency
CSS operates directly within the browser's layout engine, meaning it doesn’t require additional processing or event handling as JavaScript does. When using JavaScript to truncate text, the script needs to run on page load (or after DOM manipulation), and sometimes, it needs to listen for events such as window resizing to adjust truncation. This can introduce unnecessary overhead, especially in complex or resource-constrained environments like mobile devices.
CSS, on the other hand, is declarative. Once applied, it allows the browser to handle text rendering without any further execution or processing. This leads to faster load times and a smoother user experience.
Simplicity and Maintainability
CSS solutions are much simpler to implement and maintain than their JavaScript counterparts. All it takes is a few lines of CSS to implement truncation. In contrast, a JavaScript solution would require you to write and maintain a function that manually trims strings, inserts ellipses, and re-adjusts the text whenever the window is resized.
Here's the JavaScript Truncation Example to compare the complexity:
JavaScript Truncation Example:
function truncateText(element, maxLength) {
const originalText = element.textContent;
if (originalText.length > maxLength) {
element.textContent = originalText.substring(0, maxLength) + '...';
}
}
const element = document.querySelector('.truncate');
truncateText(element, 50);
At the example above, we truncated the text to 50 characters which may be 1 line on large screens and 6 lines on mobile and in that case we will need to add more code to truncate it responsively. As you can see, the CSS solution we used earlier is more concise and readable, whereas the JavaScript version is more verbose and requires managing the string length manually.
Responsiveness Without Extra Code
With CSS, truncation can adapt automatically to different screen sizes and layouts. You can use relative units (like percentages or vw/vh), media queries, or flexbox/grid properties to ensure the text truncates appropriately in various contexts.
If you were using JavaScript, you’d need to write additional logic to detect changes in the viewport size and update the truncation manually. This would likely involve adding event listeners for window resize events, which can degrade performance and lead to more complex code.
CSS Example for Responsive Truncation:
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%; /* Automatically adjusts based on screen size */
}
To achieve this in JavaScript, you’d need to add more code to handle the width adjustments dynamically, making it more complex to maintain and troubleshoot.
Separation of Concerns
CSS handles the presentation layer of your website, while JavaScript should focus on dynamic functionality or data manipulation. By keeping truncation logic within your CSS, you're adhering to the principle of separation of concerns, where each layer of your web application has a clear, well-defined role.
Using JavaScript for visual tasks like truncation mixes these concerns, making your codebase harder to maintain, debug, and scale. CSS is purpose-built for layout and visual control, and truncation is naturally a part of that domain.
Browser Support and Cross-Browser Consistency
Modern CSS properties like text-overflow and -webkit-line-clamp are widely supported across all major browsers. This means that CSS solutions for truncation are generally consistent and reliable. JavaScript solutions, on the other hand, may behave differently depending on the browser environment and require additional testing and handling for cross-browser compatibility.
While older browsers may not support specific CSS truncation techniques (e.g., multi-line truncation), fallback options (like single-line truncation) can be easily managed through CSS alone. With JavaScript, more complex logic might be required to handle such situations.
Reduced Risk of Layout Shifting
JavaScript-based text truncation risks causing layout shifting, especially during initial page loads or window resizes. The browser may need to recalculate the layout multiple times, leading to content flashing or jumpy behavior as text truncation is applied.
CSS-based truncation is applied as part of the browser’s natural rendering flow, eliminating this risk and ensuring a smoother experience for the user.
Conclusion
CSS is the optimal solution for truncating text in most cases due to its simplicity, efficiency, and responsiveness. It leverages the power of the browser’s rendering engine, avoids the overhead of JavaScript, and keeps your code clean and maintainable. While JavaScript truncation has its use cases, CSS should always be your go-to solution for truncating strings, especially in static or predictable layouts. If you like this post, check out the other CSS posts on our blog!
