Question

<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都报告宽度为50px，但.child应该超过50像素。有没有办法确定子元素溢出其父元素的程度？

e.g。类似于.child的位置：绝对，它有多宽，没有实际位置：绝对？

Answer 1

您想知道scrollwidth。例如，http://jsfiddle.net/y8uZe/1

document.getElementById("child").scrollWidth;

编辑：绝对看起来像Firefox中的某种bug与白色空间：nowrap有关。

看看这个小提琴：

http://jsfiddle.net/y8uZe/2

你可以在这里清楚地看到scrollHeight如何为你提供正确的值，而scrollWidth实际上也给出了正确的值，因为文本是包装的。但是当你告诉div不要包装那个文本时，会发生奇怪的事情。

无论如何。有些浏览器有bug。无论是Safari / IE / Chrome还是Opera / Firefox。而且由于Opera总是有错误，我打赌它错了。 :)

另外，当我从http://www.quirksmode.org/dom/w3c_cssom.html读取定义时，scrollWidth绝对是正确使用的属性：“整个内容字段的宽度和高度，包括当前隐藏的那些部分。”

最后一次编辑：如果将内部div更改为display：table。它解决了这个问题。您可能会也可能不会这样做，具体取决于您的CSS，但至少知道这一点很好。示例：http://jsfiddle.net/y8uZe/3/

如何通过溢出来判断元素被切断的像素数：隐藏在父级上

1 个答案: