Standard line-clamp (unprefixed) and -webkit-line-clamp

`-webkit-line-clamp` (com `display:-webkit-box`) funciona em todo lugar. `line-clamp` sem prefixo: atrás de flags no Chrome e no Firefox (Firefox 154 `layout.css.line-clamp.enabled`), o Safari suporta a sintaxe legada. Não é Baseline.

Chrome flagEdge flagSafari legacyFirefox flag

Trunca um bloco em N linhas com reticências. A propriedade padrão vai funcionar em layout de bloco normal (sem `-webkit-box`), o que corrige as esquisitices de padding e overflow da sintaxe legada.

This description is clamped to three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

CSS

.fx-046 {
  max-width: 320px;
  font-family: system-ui;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden
}
@supports (line-clamp: 3) {
  .fx-046 {
    display: block;
    line-clamp: 3
  }
}

HTML

<p class="fx-046">This description is clamped to three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>

Fallback: O bloco legado `-webkit-line-clamp` é o fallback e funciona em todos os navegadores.

Fonte: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://caniuse.com/mdn-css_properties_line-clamp

Prompt

Limite texto de várias linhas com o trio legado `display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:N; overflow:hidden`, e coloque `@supports (line-clamp: N) { display:block; line-clamp:N }` por cima para os navegadores que entregam a propriedade padrão. Não trunque strings em JavaScript.