Question

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

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

＆＃13;

.p100 {
  width: 100px;
}

.p150 {
  width: 200px;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

嗨:)这里反应虚拟化的作者。

我认为您应该查看CellMeasurer组件。我为像你正在描述的用例创建了它。查看演示here和文档here。

基本上，CellMeasurer允许您推迟测量文本直到运行时。 List可以使用估计的大小，直到那时还没有可见的行。

Answer 2

看起来你似乎想要知道你在div重叠之前留下了多少行。

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

Answer 3

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

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

和javascript：

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

计算div中将使用多少行？

3 个答案: