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

`-webkit-line-clamp` (with `display:-webkit-box`) works everywhere. Unprefixed `line-clamp`: behind flags in Chrome and Firefox (Firefox 154 `layout.css.line-clamp.enabled`), Safari supports the legacy syntax. Not Baseline.

Chrome flagEdge flagSafari legacyFirefox flag

Truncates a block to N lines with an ellipsis. The standard property will work on normal block layout (no `-webkit-box`), which fixes the padding and overflow quirks of the legacy syntax.

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: The legacy `-webkit-line-clamp` block is the fallback and works in all browsers.

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

Prompt

Clamp multi-line text with the legacy trio `display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:N; overflow:hidden`, and layer `@supports (line-clamp: N) { display:block; line-clamp:N }` on top for browsers that ship the standard property. Do not truncate strings in JavaScript.