如何從字體大小計算字符寬度。

我試圖計算適合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

如何從字體大小計算字符寬度。

回答

相關問題