如何使用JavaScript計算一行中的字符數

假設我有一個寬度爲200px且字體大小爲16的div。現在我想計算可以適合div的行數的字符數。我如何計算使用JavaScript或jQuery的字符數。如何使用JavaScript計算一行中的字符數

2011-11-13 Anoop

你想要完成什麼？無論如何，您無法準確計算出只能使用字體大小的字符數量。 – NullUserException

這是否也取決於字體大小和字體重量以及填充等？ – Smamatti

除非你使用固定寬度的字體，否則沒有單個字符可以放入給定寬度的一行中。 –

更新：哦，我忽略了隱藏的評論。上面提到的CSS解決方案絕對是更好的工作。我的回答直接解決了計算符合一行的字符的問題。我不會刪除它，因爲有人可能會發現它很有用。

即使您有比例字體，也可以在一行中獲得可以放入的字符數。有兩種方法 - 或者使用以下技巧或者的measureText方法。

var target_width = 200; // line width 
var text = 'Lorem ipsum. I want to know how many chars of this text fit.'; 

var span = document.createElement('span'); 
document.body.appendChild(span); 
span.style.whiteSpace = 'nowrap'; 
// define the style 
span.style.fontFamily = 'Lucida Grande'; 
span.style.fontSize = '14px'; 

var fit = text.length; 
for (var i = 0; i < fit; ++i) { 
    span.innerHTML += text[i]; 
    if (span.clientWidth > target_width) { 
    fit = i - 1; 
    break; 
    } 
} 

document.body.removeChild(span); 

// fit = the number of characters of the text 
//  that you can fit on one line

來源

2011-11-13 20:29:34

你解決了我的問題，謝謝。 – Anoop

其實我想截斷我的內格文本，使其正好適合到該分區（文本長度是非常大）

您可以用CSS做到這一點：

white-space: nowrap; 
overflow:hidden; 
text-overflow: ellipsis; //Doesn't work in all browsers, just adds "..."

http://jsfiddle.net/46AML/

來源

2011-11-13 19:08:59 Esailija

謝謝，我每天學習一些新的東西'文字溢出：ellipsis' – david

如果每個字符的寬度相同，則只能計算每行字符數。對於所有固定寬度的字體，例如在stackoverflow的問題編輯器中的字體都是如此。

如果您確保使用固定寬度字體，則可以計算單個字符的寬度，例如，使用function posted in this answer。然後，簡單地將<div>的寬度除以字符的寬度。

來源

2011-11-13 19:10:27 Yogu

如何使用JavaScript計算一行中的字符數

回答

相關問題