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

This is one of the most recurring issues on StackOverflow. https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css/13924997#13924997 Unfortunately, there are no easy solutions other than using Javascript. — Richard Hunter, Oct 08 '20 at 23:37
@RichardHunter that's not the question being asked, line-clamp should work with an ellipsis on all major browsers according to caniuse. I'm having this same issue, only in Safari. — Sean Beck, Jun 04 '21 at 14:26

score 3 · Answer 1 · answered May 16 '22 at 20:09

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.

In my case, `line-break: after-white-space;` alone did the trick, thanks! — Kirill Taletski, Feb 22 '23 at 12:13

score -1 · Answer 2 · answered Jan 29 '22 at 11:46

This is not working in safari for many users, I came across one solution, you need to add the max-height property in your CSS:

 .collection_blurb{
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       max-height: 3em;
  }

<div class="collection_blurb">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
 </div>

I don't believe adding `max-height` actually corrects this; it simply limits the height. It doesn't add an ellipsis, nor ensure clean truncation of the text between-lines. — Andrew, May 16 '22 at 19:11

Safari: -webkit-line-clamp isnt showing ellipsis

2 Answers2

Linked