Question

所以我有<div></div>。我想知道在它换行到下一行之前，字符串中有多少（长度）。该脚本应考虑元素的宽度（实际clientWidth），左右边距以及左右填充。

<div id="stackoverflow"></div>

JavaScript，假设魔术函数为calculate：

calculate("#stackoverflow","the string to be inputed to the div");
// That should either output how much of the string fits in the div
// or the string's length if it fits without wrapping.

选择器#stackoverflow并不重要，只是更容易理解。

此时，我唯一的想法是有一个while循环，为div添加一个字符，然后检查div是否已经包装，如果没有继续等，则返回字符数，但需要太久了！

老实说，我不在乎答案是否使用jQuery，因为我可以毫不费力地将它翻译成普通的JS。

Answer 1

您的方法很好，但可以进行优化：

您可以在屏幕外渲染div的副本（并作为身体的直接子项）以最大限度地减少回流和重绘。

首先通过测量5个字符的宽度来估计字符数（估计越好），并将clientWidth除以此宽度。然后你可以从那里添加/减去字符。如果您对相同宽度的多个div执行此操作，则将先前的值缓存为下一行的起始估计值。

Answer 2

除了要求浏览器搞砸之外，你的知识和控制中有太多细节可以做出任何其他事情。但是如果你想加快速度，最简单的方法是进行二分查找以找出div包装的位置。对于您认为太慢的解决方案，这将是一个数量级的改进。

计算多少个字符（来自一个字符串）将适合div而不进行包装？

2 个答案: