0 
<div class="parent" style="width: 50px; overflow: hidden;">
  <div class="child" style="white-space: nowrap;">Some string of text wider than 50 pixels</div>
</div>

.parent と .child は両方とも 50 ピクセルの幅を報告しますが、.child は 50 ピクセルを超える必要があります。子要素が親をどれだけオーバーフローしているかを判断する方法はありますか?

たとえば、.child が position: absolute の場合、実際に position: absolute にせずにどのくらいの幅になるでしょうか?

4

1 に答える 1

0

スクロール幅を知りたい。例: http://jsfiddle.net/y8uZe/1

document.getElementById("child").scrollWidth;

編集: 間違いなく、空白:nowrap に関係する Firefox の何らかのバグのように見えます。

このフィドルを見てください：

http://jsfiddle.net/y8uZe/2

ここでは、テキストが折り返されているため、scrollHeight がどのように適切な値を提供しているか、scrollWidth も実際に適切な値を提供しているかを明確に確認できます。しかし、そのテキストをラップしないように div に指示すると、奇妙なことが起こります。

いかなる場合でも。一部のブラウザにはバグがあります。Safari/IE/Chrome または Opera/Firefox のいずれかです。そして、Opera には常にバグがあるので、それが間違っていることに賭けます。:)

また、http: //www.quirksmode.org/dom/w3c_cssom.html から定義を読んだところ、scrollWidth は使用する適切なプロパティであることは間違いありません。隠れた。"

最後の編集: 内部 div を display: table に変更した場合。問題を修正します。CSS によっては、それができる場合とできない場合がありますが、少なくとも知っておくとよいでしょう。例: http://jsfiddle.net/y8uZe/3/

于 2012-09-14T03:40:47.410 に答える