0

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

我需要这个的原因是因为我使用了一个 React List 组件（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>

4

3 回答 3

2

我需要这个的原因是因为我使用了一个 React List 组件......它接受列表项高度的固定值或根据索引计算列表项高度的函数。

嗨 :) react-virtualized 的作者在这里。

我认为您应该检查该CellMeasurer组件。我为您所描述的用例创建了它。在此处查看演示并在此处查看文档。

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

于 2017-02-18T00:15:08.990 回答
0

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

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

和 javascript：

document.getElementById('the-div-id').clientWidth;
document.getElementById('the-div-id').clientHeight;
于 2017-02-17T22:41:31.333 回答
0

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

如果是这种情况，您可以将宽度更改为width:auto或将其设置为100%. 这样，它将随着您的“线条”而扩展。

于 2017-02-17T22:17:23.720 回答