Back to all features
Open for signals CSS

line-clamp

The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box.

Community use cases (4)

Community signal summary

Web developers emphasize that native support for line-clamp is crucial for achieving predictable text block heights across diverse scripts and typographic rendering contexts [1]. A primary architectural pain point is that precise text truncation and bounding box dimensions cannot be calculated on the server side, as client-specific font metrics, fallback fonts, and final layout geometry are impossible to know prior to rendering on the user's device [1].

Without native, standardized layout support for line-clamp, developers must rely on client-side JavaScript DOM measurements or brittle CSS overflow hacks to approximate character limits. These client-side workarounds introduce notable performance penalties, such as layout thrashing, re-renders, and increased script overhead across complex multi-script design systems. Developer signals strongly favor full platform consensus and standardized implementation of line-clamp, allowing browser rendering engines to natively manage font-agnostic text truncation and layout containment deterministically [1].

It enables relative predictability of the height of the text block across different scripts and fonts, whilst the text is being truncated at the right length [for the given script and font]. This is impossible to calculate at the server-side, outside of the client, as the used font and dimensions of the resulting rectangle cannot be known in advance.