The Text Truncation and Clamping pattern

The Text Truncation and Clamping pattern helps maintain layout integrity when dealing with unpredictable or variable-length content. They prevent text overflow from breaking designs or pushing other elements out of view, and they support clean, readable interfaces by limiting text to a controlled number of lines.

How the pattern works

This pattern uses a combination of CSS properties, such as overflow, text-overflow, white-space, and -webkit-line-clamp, to hide overflowing text and, optionally, add ellipses (...) to signal that more content exists. Single-line truncation uses traditional overflow rules, while multi-line clamping depends on the CSS -webkit-box model with vendor-prefixed properties.