5

a の内容spanがその親をオーバーフローしているかどうかを確認する必要がありますdiv。Chrome と FF では問題なく動作しますが、IE9 では動作しません。私は次のHTML構造を持っています:

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

次の CSS を使用します。

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

「実際の」ブラウザー (つまり、IE ではない) では、スパンが div よりも広いかどうかを簡単に確認できます。

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

しかし IE9 では、 への呼び出しinnerSpan.width()は可視サイズのみを返します。もちろん、これは常にラッパーのサイズよりも小さくなります。IE9 でテキストがオーバーフローしたかどうかを検出するにはどうすればよいですか?

注: IE8、IE7、またはその他のバージョンではなく、IE9 でのみ機能する必要があります。

編集
オーバーフローを検出するが、スパンに が必要な解決策を見つけましたdisplay: block;。以下の私の答えを見てください。

4

3 に答える 3