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

Status: `-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.  
Quelle: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://caniuse.com/mdn-css_properties_line-clamp  
Seite: https://designforai.dev/de/css/standard-line-clamp

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.

## HTML

```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>
```

## CSS

```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
  }
}
```

Fallback: Der Legacy-`-webkit-line-clamp`-Block ist der Fallback und funktioniert in allen Browsern.

## 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.