html div最多50个字符,javascript-计算多少个字符(来自一个字符串)将适合一个div而没有使其换行？...

所以我有一个< div>< / div>.我想知道在将字符串换行到下一行之前,它适合多少(长度)的字符串.该脚本应考虑元素的宽度(real clientWidth),左右边距以及左右填充.

和JavaScript,假设魔术函数是要计算的：

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.

解决方法:

您的方法不错,但是可以优化：

您可以在屏幕外渲染div的副本(并作为body的直接子对象),以最大程度地减少重排和重绘.

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

标签：word-wrap,javascript

来源： https://codeday.me/bug/20191102/1995165.html