1
HTML/CSSIntermediate#css#responsive
HTML/CSSIntermediate#css#layout-puzzle
How do you truncate text with an ellipsis, including multi-line clamping?
For single-line truncation use white-space: nowrap, overflow: hidden, text-overflow: ellipsis. For multi-line clamping, use the -webkit-line-clamp property alongside display: -webkit-box, now well supported across modern browsers.
Example
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}