CSS *only* detection of text overflows in HTML?

html css overflow selector specifications
iJames picture iJames · Sep 17, 2013 · Viewed 9.6k times · Source

I've seen suggestions on using JavaScript for detecting and acting on text that overflows an HTML element. But it's 2013, so I was wondering if maybe the CSS spec had a way to detect overflows itself.

In other words if I have a fixed size div:

<div class="smart-warning" style="width:200px; height:20px; overflow:hidden">
This is my very long text that would overflow the box.
</div>

I'd like to have a style that would do something if the text overflowed such as:

<style>
.smart-warning {
  border:1px solid black
}
.smart-warning:overflowing {
  border:1px solid red
}
</style>

It seems like we'd be really close to having something like this in CSS but pouring over the specifications is not my game.

If it doesn't exist, do you think it would be useful?

Thanks!

Answer

Christoph picture Christoph · Sep 17, 2013

I am not aware of any part of the CSS spec, where this would be possible. Selectors Level 4 supports a lot of new pseudo-classes (and quite some useful ones for checking states on input elements) but none of these are actually able to check conditions like if a box is overflowing. You still have to do this via Javascript.

Related questions

HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to …

Read More
Div height 100% and expands to fit content

I have a div element on my page with its height set to 100%. The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works …

Read More
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Suppose you have some style and the markup: When you view this. The <ul> has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y. (observed on Chrome 11 and opera (?)) …

Read More