2

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.

Denis Cakmak
  • 41
  • 1
  • 4

1 Answers1

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

srg
  • 311
  • 2
  • 5
  • Is there anyway to get this done without defining a width ? I did width 100% but didn't work and I don't want to use some pixels for the width – Mehdi Faraji Jun 02 '22 at 03:54
  • @MahdiFaraji you don't have to set the `width`, in this example if there is more than 3 lines of text the text will be cropped – srg Jun 05 '22 at 09:12