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

`-webkit-line-clamp` (mit `display:-webkit-box`) funktioniert überall. Unpräfixiertes `line-clamp`: hinter Flags in Chrome und Firefox (Firefox 154 `layout.css.line-clamp.enabled`), Safari unterstützt die Legacy-Syntax. Nicht Baseline.

Chrome flagEdge flagSafari legacyFirefox flag

Kürzt einen Block auf N Zeilen mit Auslassungspunkten. Die Standard-Property wird auf normalem Block-Layout funktionieren (kein `-webkit-box`), was die Padding- und Overflow-Macken der Legacy-Syntax behebt.

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: Der Legacy-`-webkit-line-clamp`-Block ist der Fallback und funktioniert in allen Browsern.

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

Prompt

Klemme mehrzeiligen Text mit dem Legacy-Trio `display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:N; overflow:hidden` und lege `@supports (line-clamp: N) { display:block; line-clamp:N }` für Browser darüber, die die Standard-Property ausliefern. Kürze keine Strings in JavaScript.