line clamp (webkit) not working in safari

Question

    display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-pack: end;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;

I have this to a P tag but is not working in safari, any other browser works fine

Answer 1

Multi "line clamp" (webkit) not working in safari, if use not inline elements. This example works in chrome (v100) but not in safari (v15.1).

div.hide {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
}

button {
  margin-top: 16px;
}

<div id="container" class="hide">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ducimus magni, commodi nesciunt tempora unde ipsa repellendus impedit recusandae rem aliquid, alias illum sunt consequatur animi laudantium distinctio odit explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis totam harum laudantium excepturi repellendus similique non est incidunt vero officia saepe error reprehenderit quibusdam, ex tenetur autem impedit soluta culpa.</p>
</div>

<button onclick="document.querySelector('#container').classList.toggle('hide')">Click me!</button>

But you can set display: inline; for paragraphs, then hiding will work correctly. For indentation you can add a pseudo-element.

div.hide {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
}

p {
  display: inline;
}

p::after {
  content: " \A\A";
  white-space: pre;
}

button {
  margin-top: 16px;
}

<div id="container" class="hide">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ducimus magni, commodi nesciunt tempora unde ipsa repellendus impedit recusandae rem aliquid, alias illum sunt consequatur animi laudantium distinctio odit explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis totam harum laudantium excepturi repellendus similique non est incidunt vero officia saepe error reprehenderit quibusdam, ex tenetur autem impedit soluta culpa.</p>
</div>

<button onclick="document.querySelector('#container').classList.toggle('hide')">Click me!</button>

Unfortunately, this is a hack and may not work in all cases. However, using display: -webkit-box and -webkit-line-clamp: 3 for hiding is also a hack which is missing in the spec, which is probably why safari does not support it.

The most correct and reliable solution is to use js for hiding