Feature request

Spec links

• https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp
• https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp

Currently -webkit-line-clamp property only supports an integer number which represents the maximum
number of lines to possibly render before truncating the text with an ellipsis.

I have a use-case where I need an dynamic value for the -webkit-line-clamp so it matches the
number of lines which can fit in the container (which is being truncated), assuming the container
has a dynamic height.

Also important - nothing should be painted past the ellipsis point (unlike today when the container's height is set to a value greater than the height of the truncated lines)

Example:

https://jsbin.com/kovuwow/edit?html,css,output

<div>
  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
</div>

div {
  display: -webkit-box;
  -webkit-line-clamp: auto; /* 👈 keyword to let line-clamp according to the container */
  -webkit-box-orient: vertical;
  overflow: hidden;
  resize: auto;
}

If you want line-clamp to (show N lines that can) fit the container element, it is currently impossible:

Javascript-based solution

I've hacked this using (a lot of) javascript: https://codepen.io/vsync/pen/eYbGgGL

Related StackOverflow questions:

• https://stackoverflow.com/q/51816862/104380
• https://stackoverflow.com/q/71145324/104380