typography
CSS Truncate Text with Ellipsis
Truncate single-line and multi-line text with an ellipsis (…) using pure CSS.
Text truncation is essential for cards, table cells, and any UI with limited space. This snippet covers single-line truncation (the classic overflow trick) and multi-line truncation using the modern -webkit-line-clamp approach, which is now supported in all major browsers.
Usage Note
For single-line: the parent must have a defined width (or max-width). For multi-line: -webkit-line-clamp is fully supported in all modern browsers without a prefix flag.
Tags
#truncate#ellipsis#overflow#line-clamp#text