获取具有溢出属性的 div 的高度或宽度，并使用它来设置滚动条的限制

Question

这可能是一个简单的问题，但不幸的是我不知道该怎么做。

假设我有一个带有溢出属性的 div，因此当我向其中添加一些大于其尺寸的文本时，滚动条会出现以适合其中的文本，就像这样。 ..http://jsfiddle.net/Lddxgzvz/

我想要做的是使用普通 javascript 来获得带有滚动条的 div 的新尺寸，并使用它来设置可以添加到的文本量的限制div.

我将尝试说明这一点...

假设可以添加到 div 的限制是 200px，这意味着一旦 div 达到此大小，我希望滚动条保持静止。因此，例如，如果以下文本宽度为 250px：

Hello World Foo Bar

并且单词 Bar 是 50px，我只希望这段文字出现在 div:

Hello World Foo

我尝试使用 javascript 来获取 div 的高度和宽度，但它没有考虑溢出属性。它只会获得我最初设置 div 的高度和宽度。

希望大家明白我在做什么，如果有必要我会重新编辑。

Answer 1

据我了解，您搜索 scrollWidth 和 scrollHeight

console.log(document.getElementById('div').scrollWidth);
console.log(document.getElementById('div').scrollHeight);

演示：http://jsfiddle.net/Lddxgzvz/1/

Answer 2

您可以尝试使用此 CSS:

添加内包装

display: inline-block;
max-width: 200px; /* Maximum scrollable amount */
overflow: hidden;

.outer-wrapper {
  border: solid 2px black;
  height: 100px;
  width: 100px;
  overflow: auto;
}
.inner-wrapper {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    LongLongLongLongLongLongLongLongLongLongLongLong
  </div>
</div>
<div class="outer-wrapper">
  <div class="inner-wrapper">
    Short
  </div>
</div>

获取具有溢出属性的 div 的高度或宽度，并使用它来设置滚动条的限制

Get height, or width, of a div with overflow property and use that to set a limit on the scroll bar

html

javascript

css