[css-overflow-4] line-clamp max-lines - support auto value to fit container · Issue #9368 · w3c/csswg-drafts (original) (raw)

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 { 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:

line-clamp--auto-value.mp4

Javascript-based solution

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

line-clamp--auto-value.mp4

Related StackOverflow questions:

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