Intermediate LevelCSS & Modern Layouts
How do you truncate text to a specific number of lines with CSS?
❓ Interview Prompt: Explain single-line ellipsis, multi-line truncation with -webkit-line-clamp, and the standard line-clamp.
Single-line Truncation:
Combine three properties: white-space: nowrap, overflow: hidden, text-overflow: ellipsis.
Multi-line Truncation:
Use -webkit-line-clamp (widely supported despite the prefix) with the old flex box model:
1
display: -webkit-box2
-webkit-box-orient: vertical3
-webkit-line-clamp: N (number of visible lines)4
overflow: hiddenStandard line-clamp (upcoming):
The unprefixed line-clamp property is being standardized to replace the webkit version.
Code Implementation Example
css
/* Single-line truncation */
.title-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Multi-line truncation (3 lines) */
.excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.6;
}💡Single-line and multi-line text truncation with ellipsis.
🎯 Interview Key Takeaway
Use -webkit-line-clamp for multi-line text truncation. It is the de facto standard supported in all browsers.
#Truncation#Ellipsis#Text#Intermediate
Back to all CSS & Modern Layouts Questions→