Width of overflowing span inside div, IE9

Question

I need to find out if the contents of a span is overflowing its parent div. It works fine in Chrome and FF, but not in IE9. I have the following HTML structure:

<div class="wrapper">
  <span>Dynamic text content, which may or may not overflow the parent</span>
</div>

With the following CSS:

.wrapper {
  display: inline-block;
  width: 80px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

In "real" browsers (i.e. not IE), it is easy to check if the span is wider than the div:

var innerSpan = $('.wrapper span');
var wrapperDiv = innerSpan.parent();
if (innerSpan.width() > wrapperDiv.width()) {
    // Overflow has happened
}

But in IE9, the call to innerSpan.width() only returns the visible size, which is of course always smaller that the wrapper's size. How can I detect if the text has overflown in IE9?

NOTE: It only needs to work for IE9, not IE8, IE7 or any other version.

EDIT
I found a solution, which detects overflow but requires the span to have display: block;. See my answer below.

Answer 1

The height of your span is 18px as the height of text.When the text overflows the .wrapper div automatically the heigth of span increases.

    var height=$('.wrapper span').css("height").replace('px','');
    console.log(height);
    if(parseFloat(height) > 18){
        console.log("overflow occured");
    }

DEMO