[css-conditional][css-overflow] Container features for line-clamped containers?

[LeaVerou]

Without a way to visually indicate that a container's displayed content has been clamped, line-clamp is of limited utility. Authors typically want to indicate this, using UI elements such as a gradient fade out, ellipsis ("…"), a "show more" button, etc.

Perhaps we could introduce a container feature (e.g. line-clamped or just clamped) modeled after scroll state container features. Then, authors can use it to toggle display of such elements (or pseudo-elements).

One unfortunate side effect of using container queries is that it's not possible to style the element itself (e.g. apply a gradient), but I'm not sure how else to do this without introducing cycles.

[jiangtao]

Under the rich and varied UI, I often have these requirements. When the line-camp limit is exceeded, I hope to have a customized UI to meet the needs. For example

when the line-camp limit is exceeded or triggered, the limit is similar to the Right Arrow Icon, and more are displayed through interaction.

At present, regardless of whether it exceeds or does not exceed, tooltip and other components are added, and the effect is not very good.

In order to achieve this requirement, it is necessary to calculate the number of characters or the height after the element is loaded.