Re: Idea: Native CSS Detection of Text Truncation

Hi,

Nowadays, technical discussions no longer happen on this list, but 
rather on https://github.com/w3c/csswg-drafts/issues. You may consider 
asking there instead of here.

Along the way, I'd suggest you read 
https://wiki.csswg.org/faq#selectors-that-depend-on-layout, what you are 
suggesting may be similar to the questions discussed there.

—Florian

On 2025/05/15 3:43, Lukáš Chylík wrote:
>
> Hello CSS Working Group,
>
> I am a big fan of the evolution of CSS, especially how it is becoming 
> a powerful language for visual logic on the web. I would like to 
> suggest a feature that would allow CSS to detect when text is 
> truncated (for example, when text-overflow: ellipsis causes visible 
> ellipsis at the end of a line).
>
> Currently, this is only possible with JavaScript, by comparing element 
> sizes. My idea is that CSS could natively expose this state-perhaps 
> through an extension of container scroll-state queries-so that styles 
> or content could react to truncation without the need for JavaScript.
>
> For example, if a container or element’s text is visually truncated, 
> it would be helpful to have a CSS query or pseudo-class that detects 
> this state, enabling us to display additional UI or hints for users.
>
> You can see a demonstration of the use case here: 
> https://codepen.io/luko248/pen/jOpaZOw 
> <https://codepen.io/luko248/pen/jOpaZOw>
>
> Is such a feature (for example, a truncated state in scroll-state or 
> container queries) being considered for future CSS specifications? I 
> believe this would be a valuable addition for both usability and 
> accessibility, and would further reduce the need for JavaScript in 
> visual logic.
>
> Thank you for your work and for considering this suggestion!
>
> Best regards,
>
> Lukáš Chylík
>