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

`-webkit-line-clamp` (con `display:-webkit-box`) funciona en todas partes. `line-clamp` sin prefijo: detrás de flags en Chrome y Firefox (Firefox 154 `layout.css.line-clamp.enabled`), Safari soporta la sintaxis heredada. No es Baseline.

Chrome flagEdge flagSafari legacyFirefox flag

Trunca un bloque a N líneas con puntos suspensivos. La propiedad estándar funcionará sobre layout de bloque normal (sin `-webkit-box`), lo que corrige las rarezas de padding y overflow de la sintaxis heredada.

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: El bloque heredado `-webkit-line-clamp` es el respaldo y funciona en todos los navegadores.

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

Prompt

Recorta texto de varias líneas con el trío heredado `display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:N; overflow:hidden`, y superpón `@supports (line-clamp: N) { display:block; line-clamp:N }` para los navegadores que publiquen la propiedad estándar. No trunques cadenas en JavaScript.