'line clamp (webkit) not working in safari

    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

csssasssafarioverflow


Solution 1:[1]

line clamp does work on safari.

It doesn't work on inner block level elements: CSS line-clamp does not work in Safari on inner block level elements

.line-clamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<p 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.
</p>

Solution 2:[2]

The <p> tag often times has browser-defined margins by default, or if you use a CSS library like Bootstrap, so that could be causing your -webkit-line-clamp on Safari to seem like it's not working or is buggy.

In my case, I had a <p> with a pre-defined margin-bottom value inside of a <div> that caused the subsequent lines past the -webkit-line-clamp limit to be revealed.

On Chrome & Firefox, the following works fine:

<div class="parent">
    <p>Some really long string of text here that eventually gets clamped</p>
</div>

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

On Safari, since the inner <p> had a margin-bottom, it affected the height of the parent <div> by making the parent taller, and revealing the subsequent lines.

So, my cross-browser solution was:

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

.parent > p {
    margin-bottom: 0;
}

Solution 3:[3]

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

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 J Davies
Solution 2 CopyLeft
Solution 3 srg

Related Questions