I want to clamp lines of text based on the dimensions of the box it’s in based on parent’s max‑height

Submitted by Florian van der Wielen

This idea is currently being discussed.

Similarly to -webkit-line-clamp and line-clamp.
However, it's different that instead of declaring how many lines I want visible, I want clamping to happen automatically to prevent overflow out of a container with a set (max) height. This also for a container with some child block elements, that together not overflow their parent but clamp with an ellipsis.

This is useful in card designs that link to for instance news articles, which display (part of) the title and introduction paragraph, and the titles vary wildly. With short titles it helps to show a reasonable number of lines of the intro paragraph. title length can vary wildly though, and can be quite long, so this could vary the card height wildly which results in messy UI.

Tagged
CSS Typography Layout