Truncate text to a fixed number of lines with ellipsis. No JavaScript.
/* Truncate to 2 lines with ellipsis */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 3 lines */
.line-clamp-3 {
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}All four are needed: display -webkit-box, -webkit-line-clamp: N, -webkit-box-orient: vertical, overflow: hidden. Works in all modern browsers.
Tailwind's line-clamp-2, line-clamp-3 use this under the hood. Use the utility or copy this block.
className="line-clamp-2"