Safari: -webkit-line-clamp isnt showing ellipsis

Question

I want the content of .main to be limited to 5 lines and upon exceeding that, I want to show ellipsis.

.main {
  width: 100px;
  margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

<div class="main">
  <ul>
    <li>hello1</li>
    <li>hello2</li>
    <li>hello3</li>
    <li>hello4</li>
    <ul>
      <li>hello5</li>
      <li>hello6</li>
      <li>hello7</li>
      <li>hello8</li>
    </ul>
  </ul>
</div>

This works as expected in Chrome and content ends with ellipsis after 5 line. But in Safari, no ellipsis is shown in the end. Also Safari is showing 6 lines instead of 5. Pls see following screenshot.

Does anyone has any suggestion on how to fix it in Safari?

---

Versions:

Chrome: Version 85.0.4183.121 (Official Build) (64-bit)

Safari: Version 13.1.2

Answer 1

This is an annoying issue. Support seems spotty for -webkit-line-clamp behavior in Safari (I'm seeing it working in 14, not 15), and the ellipsis behavior just doesn't work.

The best options I've found:

• Use the npm package shave if you're working in vanilla JS.
• If you're working in React, you can use the npm react-truncate package, which is easier to implement in React.
• The lightest option, if you can live with working truncation but no ellipsis in Safari, is CSS-only:

        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 223px; // fallback cut-off for Safari if it doesn't recognize -webkit-line-clamp
        line-break: after-white-space; // places the cut-off between lines, so you don't get the upper half of a line of text.

The line-break is a little weird; according to MDN, it's intended to manage punctuation in Chinese/Japanese/Korean; and they don't even list the after-white-space property. But Safari's devTools auto-suggest it, and it has the desired effect.