You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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: Codepen sample
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.
The text was updated successfully, but these errors were encountered:
Luko248
changed the title
[Proposal][css-overflow-5][css-2025]
[Proposal][css-overflow-5][css-2025] Native CSS Detection of Text Truncation
May 15, 2025
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: Codepen sample
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.
The text was updated successfully, but these errors were encountered: