Search code examples
cssellipsis

-webkit-line-clamp showing partially cut off last line when zooming in or out

I am using the -webkit-line-clamp property in order to achieve multi-line ellipsis on Chrome. We have set the height and max-height appropriately so that we see exactly N lines and the proper ellipsis. However, as soon as we zoom in or zoom out in the browser, partially cut off (N+1)th line shows. Is there any way to prevent this partially cut off line from being shown regardless of the zoom level?

CSS is:

myText {
  font-size: 12px;
  line-height: 14px;
  width:200px;
  height:58px;
  max-height:58px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

and HTML is

<div class="myText">imagineSomeLongTextHere</div>
Solution

  • In case it helps someone - I added the following CSS to fix the issue:

    -webkit-box-pack: end;