計算多少個字符（來自一個字符串）會適合div而不會換行？

所以我有一個<div></div>。我想知道一個字符串在它換行到下一行之前會有多少（長度）。該腳本應考慮元素的寬度（實際clientWidth），左右邊距以及左側和右側填充。計算多少個字符（來自一個字符串）會適合div而不會換行？

<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。

來源

2011-02-08 JCOC611

沒有簡單的方法來做到這一點，除非你使用等寬字體和固定大小......如果用戶放大或縮小，它將立即打破... –

你在這裏的目標是什麼？如果你的目標是讓文本不包裝，那麼首先嚐試一下css解決方案 – corroded

好的，這個想法是讓文本不要包裝，但我嚴重懷疑CSS可以在這裏有任何幫助。最簡單的說法是文本看上去會被包裹起來，但實際上會被分隔成div。 – JCOC611

你是一個好方法，但可以進行優化：

可以渲染在div離屏（和身體的直接子），以儘量減少迴流和重新的副本。

也可以通過測量5個字符的寬度來估計字符數（估計越好），並將clientWidth除以該寬度。然後你可以從那裏添加/減去字符。如果您對相同寬度的多個div執行此操作，則將之前的值緩存爲下一行的起始估計值。

來源

2011-02-08 03:29:17

+1正是我正在尋找的，我會給其他用戶機會來回答，但在這一點上，這是贏得接受的答案。謝謝！ – JCOC611

而二進制搜索將盡最大努力。 – kirilloid

@kirilloid，不一定。二進制搜索是日誌時間，而這可以是大致恆定的時間，取決於初始估計的好壞程度。 –

你的知識和控制中有太多的細節可以讓問題變得更糟，而不是讓瀏覽器搞砸。但是如果你想加快速度，最簡單的方法是進行二進制搜索來找出div的換行位置。如果您說的解決方案太慢，這將會提高一個數量級。

來源

2011-02-08 03:10:17 btilly

計算多少個字符（來自一個字符串）會適合div而不會換行？

回答

相關問題