Skip to content

[Proposal][css-overflow-5][css-2025] Native CSS Detection of Text Truncation #12199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Luko248 opened this issue May 15, 2025 · 0 comments
Open

Comments

@Luko248
Copy link

Luko248 commented 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.

@Luko248 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant