如何測量將有多少字符適合文檔的寬度？

Question

我需要用JavaScript（我使用jQuery）編寫一個函數，它能夠識別適合瀏覽器窗口一行的字符數。我使用等寬字體來緩解這個問題，但是如果我將它推廣到不同的字體會更好。

我怎麼知道在瀏覽器中有多少個字符會填滿一行？目的是計算填滿一行的字符數。

Answer 1

您可以創建元素併爲其添加字符，直到檢測到包裝爲止。通過觀察offsetHeight中的更改（可以使用二分算法對其進行優化）。

這當然很依賴瀏覽器，系統，安裝的字體和用戶設置，因此每次頁面顯示，調整大小或用戶更改字體大小時（甚至整頁縮放引入了一些可能導致字符數改變的錯誤的錯誤）。

因此，在大多數情況下它可能是一種矯枉過正的情況，如果執行得不好會導致比解決問題更多的麻煩。

還有其他解決方案，例如，如果你想確保只有一行是可見的，你可以使用white-space:nowrap和overflow:hidden以及在一些瀏覽器text-overflow:ellipsis中很好地進行文本剪切。或者如果您不想剪切文字，請使用overflow:hidden的單行高容器。

Answer 2

你可以得到可用於瀏覽器的總寬度與

window.innerWidth 

然後你可以用下面的方法元素的寬度。

document.getElemenById('elem').clientWidth 

Answer 3

有沒有簡單的方法來做到這一點的HTML。

但是，如果你真的必須知道，你可能有一些很醜陋的JavaScript弄明白：

首先，創建一個<DIV>與你所需要的寬度，把一些字符，並要求其.height （）以像素爲單位。然後，不斷添加字符並繼續檢查.height（），當<div>的高度發生變化時，您知道它已經變得適合新的文本行。