'CSS line-clamp not working in safari (on Mac)

I have 2 problems with the display of line-clamps in Safari browser. First of all the codesnippet:

.clamp-3-lines{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  -webkit-box-pack: end;
}

div{
  border: 1px solid black;
  max-width: 30ch;
  p:nth-child(2){
    color: red;
  }
}
<div class="clamp-3-lines">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat!
  </p>
  <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat!
  </p>
</div>

In Chrome everything is displayed without any problems. In Safari (on Mac), however, the last line is truncated: enter image description here and in case there are multiple paragraphs, the second paragraph is displayed above the first as if it were absolutely positioned. I was able to fix the first error by removing the default margin of the paragraph element, but this is not desired. Unfortunately, since the text comes from a Wordpress backend via a WYSIWYG editor, I can't do anything about the paragraphs either.

htmlcss


Solution 1:[1]

In this example you can do the hack

/* add padding for visual consistency */
.clamp-3-lines{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  -webkit-box-pack: end;
  padding-top: 1em;
}

div{
  border: 1px solid black;
  max-width: 30ch;
  p:nth-child(2){
    color: red;
  }
}

/* change dislay */
p {
  display: inline; 
}
<div class="clamp-3-lines">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat!
  </p>
  <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat!
  </p>
</div>

To learn more about why this happens, click here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 srg

Related Questions