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

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

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.

## 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: O bloco legado `-webkit-line-clamp` é o fallback e funciona em todos os navegadores.

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