计算一个 div 可以容纳多少个字符（来自字符串）而不使其换行？

Question

所以我有一个<div></div>. 我想知道在换行到下一行之前，字符串可以容纳多少（长度）。脚本应考虑元素的宽度 (real 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 的副本（并作为 body 的直接子级），以最大程度地减少回流和重绘。

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