16

Is it possible to write a css selector that only selects elements where the text-overflow behavior has been invoked?

<div style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
I don't want to select this
</div>

<div style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
But I do want to select this because it's overflowing
</div>

Fiddle

Matt Mills
  • 8,692
  • 6
  • 40
  • 64
  • I think you'll need javascript for this. Here's a similar post: http://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements – AJames May 31 '13 at 20:14
  • No, there isn't. But depending on exactly what you want to do with the overflow, there might be another way to achieve it. – Spudley May 31 '13 at 20:39
  • @Spudley - I'm trying to build a non-native tooltip style for text blocks. I just wanted to see if there was a CSS selector I could use before I went the Javascript route. – Matt Mills May 31 '13 at 20:43
  • 2
    what I've done in the past with this sort of thing is use `:hover` to change the element when you mouse over it so that the overflow is visible, and give it some additional styling like border and background. I guess this is the kind of thing you're thinking of? You can't differentiate between ones that have overflowed and ones that haven't, but the effect works equally well for either. – Spudley May 31 '13 at 20:50
  • That's basically what I ended up doing, as well. It's one of those things that I've done several times before, but I always end up trying to do it differently this time :) – Matt Mills May 31 '13 at 20:53

1 Answers1

11

No there's no CSS selector with which you can select elements where overflow occurs.

user2019515
  • 4,495
  • 1
  • 29
  • 42
  • 1
    There's a proposal to add it, but it probably won't happen: https://github.com/w3c/csswg-drafts/issues/2011 . As a workaround, maybe "overflow" event will become widely adopted someday: https://developer.mozilla.org/en-US/docs/Web/API/Element/overflow_event – matt Feb 19 '20 at 07:55