5

Is there any way to apply a particular style to an element conditionally on it overflowing?

E.g. if I have say:

<div>
    This text is very long, no really it is extremely long; it just goes on and on and on and on. You might say it's a bit like the Duracell(R) bunny, but without the batteries, and the floppy ears.
</div>

and

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// TODO: is there any way to only apply this rule if the text is overflowing?
div {
    background-color: red;
}

Is there any way using pure CSS to have the background-color: red rule apply only if the text is overflowing?

Note: I can see a way of doing this using javascript; I just want to know if there is a pure CSS way to do it.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
magritte
  • 7,396
  • 10
  • 59
  • 79
  • CSS 2.1/3 has no selector for an overflow condition. Even a JavaScript solution would be interesting. You might expand your question to invite a jQuery/JavaScript solution. – Marc Audet May 09 '13 at 11:16
  • 3
    Not possible in pure CSS. Here is JS solution http://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content – Gurpreet Singh May 09 '13 at 11:16

0 Answers0