计算 div 中将使用多少行？

Question

在下面的代码片段中有四个 div，每个有 33 个字符。根据宽度和自动换行，div 可以占一行、两行或三行。事先计算这个的好方法是什么？

我需要这个的原因是因为我使用了一个 React 列表组件 (https://bvaughn.github.io/react-virtualized/#/components/List)，它接受一个列表项高度的固定值或一个函数来计算列表项的高度，具体取决于索引。使用该索引，我可以检索 div 中的文本，并使用 JavaScript 获取列表的宽度。从这些变量中，我有望计算出合适的高度。

.p100 {
  width: 100px;
}

.p150 {
  width: 200px;
}

<div id="div1" class="p100">
  Hello Hello Hello Hello Hello
</div>
<hr>
<div id="div2" class="p100">
  abcd abcd abcd abcd abcd abcd
</div>
<hr>
<div id="div3" class="p150">
  Hello Hello Hello Hello Hello
</div>
<hr>
<div id="div4" class="p150">
  abcd abcd abcd abcd abcd abcd
</div>

Answer 1

您似乎是在说您想知道在单词与 div 重叠之前还剩下多少行。

如果是这种情况，您可以将宽度更改为 width:auto 或将其设置为 100%。这样，它将随着您的 'lines'.

扩展

Answer 2

通过 jquery 您可以通过以下方式获得每个 div 的宽度和高度：

$('#the-div-id').width();
$('#the-div-id').height();

和javascript：

document.getElementById('the-div-id').clientWidth;
document.getElementById('the-div-id').clientHeight;

Answer 3

The reason I need this is because I use a React List component...which accepts a fixed value for the height of a list item or a function to calculate the height of a list item depending on the index.

您好 :) 这里是 react-virtualized 的作者。

我认为您应该查看 CellMeasurer 组件。我为您所描述的用例创建了它。查看演示 here and docs here.

本质上，CellMeasurer 允许您将文本测量推迟到运行时。 List 在此之前可以对尚不可见的行使用估计大小。

计算 div 中将使用多少行？

Calculate how many lines will be used in div?

html

css

reactjs

react-virtualized