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 是位置：绝对的，它会有多宽，而实际上没有使其位置：绝对？

4

1 回答 1

0

你想知道滚动宽度。例如，http://jsfiddle.net/y8uZe/1

document.getElementById("child").scrollWidth;

​ 编辑：绝对看起来像是 Firefox 中与 white-space:nowrap 相关的某种错误。

看看这个小提琴：

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 回答