如何从字体大小计算字符宽度。

我试图计算适合div的一行的字符数量并修剪掉其余部分，尽管text-overflow是一个选项，我宁愿计算适合它的字符串的长度。是否字体的字体大小几乎等于它的宽度，如果不是，你如何计算它的宽度，包括文本间距和空白宽度。如何从字体大小计算字符宽度。

P.S. - 在提出这个问题之前，我知道我已经通过了大部分的问题和答案，但都没有令人满意。

来源

2017-05-09 Dan Philip

是使用['measureText']（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ measureText）一个选项？ – Scott

@Scott我没有使用画布。文本在'div'中。 –

我会做的一个方法是检查div中是否有足够的空间。为此，您需要创建一个相同的div，并从克隆的div中慢慢删除一个字符，直到原始div的大小与克隆的div相等。

divClone.textContent = text 
document.body.appendChild(divClone) 
while(divClone.clientHeight > originalDiv.clientHeight) { 
    divClone.textContent = divClone.textContent.substring(0, divClone.textContent.length-1) 
} 
originalDiv.textContent = divClone.textContent

然后，您可以删除克隆DIV当它完成

来源

2017-05-09 16:06:25 Bwaxxlo

如何从字体大小计算字符宽度。

回答

相关问题