I want to clamp the lines of text inside a box to limit the box size, (also clamping children)

[WebWeWantBot]

---

title: I want to clamp the lines of text inside a box to limit the box size, (also clamping children)
date: 2021-03-19T09:36:32.013Z
submitter: Florian van der Wielen
number: 605470a099ddea18942cf1e2
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:

• title:
  url:
  type: [ article || explainer || draft || spec || note || discussion ]

---

Similarly to -webkit-line-clamp- https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
But 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.

---

If posted, this will appear at https://webwewant.fyi/wants/605470a099ddea18942cf1e2/