Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height

Question

I made an image for this question to make it easier to understand.

Is it possible to create an ellipsis on a

with a fixed width and multiple

Answer 1

You can use -webkit-line-clamp property with div.

-webkit-line-clamp: which means set the maximum number of lines before truncating the content and then displays an ellipsis (…) at the end of the last line.

div {
  width: 205px;
  height: 40px;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /*  values */
  -webkit-line-clamp: 2;
}

This is a multi-lines text block, some lines inside the div, while some outside