javascript - 获取具有溢出属性的 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

您可以尝试使用此 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>