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

Question

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

This issue is same as https://stackoverflow.com/questions/64271205/safari-webkit-line-clamp-isnt-showing-ellipsis. Unfortunately, there are no answers in this link. — kiner_shah, Jan 12 '22 at 10:50
Not the same. The issue is Safari does not hide multiple overflow block content. The issue you mentioned works fine about hiding the overflow content. — DIGITALSQUAD, Jan 13 '22 at 01:32

J Davies · Accepted Answer · 2022-01-12T14:32:56.173

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;
}

Thanks for your reply! As you wrote, safari does not add ellipsis but Chrome does when set display attribute as -webkit-box. — DIGITALSQUAD, Jan 13 '22 at 01:02
Yes that looks like the best approach. One thing to keep in mind in regards to accessibility; in both methods, the visibly hidden elements will still be in the DOM and so screen readers will still be able to read them. — J Davies, Jan 19 '22 at 13:13

DIGITALSQUAD · Answer 2 · 2022-01-13T02:20:47.017

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.

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

2 Answers2

Linked