CSS line-clamp does not work in Safari on inner block level elements

CSS

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

HTML

<div class="line-clamp">
  <div>Line 1</div>
  <div>Line 2</div>
  <div>Line 3</div>
  <div>Line 4</div>
  <div>Line 5</div>
</div>

Chrome works fine

Safari does not work

Solution 1:

The latest version of safari appears to have bugs in regards to overflow: hidden.

line clamp does still work for a single div in safari if you are able to reduce the number of div's used in your code.

<div class="line-clamp">
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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Alternatively, this css would get the overflow to work, but does not add the ellipsis

.line-clamp{
  overflow: hidden;
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  height: 4.5rem;
}

Solution 2:

As J Davies wrote, Safari does not hide overflow contents in inner block elements. So just added height and adjusted font-size and line-height properties ad J Davies wrote.

CSS

.line-clamp{
  display: -webkit-box; // Notice display: block doesn't add ellipsis in Chrome
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  // added below
  font-size: 1rem;
  line-height: 1.5rem;
  height: 4.5rem;
}

Chrome still works fine

Safari does not add ellipsis always, but sometimes do.