如何限制每行文字的數量爲固定寬度？

Question

嗨，大家好我想弄清楚如何限制通過JavaScript每行產生的字數量。這些單詞與span標籤一起使用，因此每個單詞都是分開的，單詞來自一個數組並且只是迭代出來。我想讓它在兩行完整時停止打印單詞。建議？

<div id="container"> 
     <div id="wordsBox"> 
     <span wordnum="1" class> Test </span> 
     <span wordnum="2" class> Test </span> 
     <span wordnum="3" class> Test </span> 
     </div> 
</div> 

容器是960px，所以我想弄清楚如何在兩行填滿時停止生成跨度。

Answer 1

首先確定您的字符寬度在px中。如果這不是一個靜態數字，那麼創建一個帶有單個字符的div，然後獲取該div的尺寸（確保刪除它的填充，邊框，輪廓等）。

var charWidth = 12; 
var maxLines = 2; 
var containerWidth = 960; 
var wordArray = ["Test","Test"]; //To whatever length.... 
var maxLength = Math.floor((containerWidth*maxLines)/charWidth); 
var currentLength = 0; 
while(currentLength < maxLength) { 
    currentLength = document.querySelector("#wordsBox").innerText.length; 
    var nextWord = wordArray.shift(); 
    if(nextWord.length + currentLength < maxLength) { 
    document.querySelector("#wordsBox").innerHTML += "<span ..>"+nextWord+"</span>"; 
    } else { 
    currentLength = maxLength; 
    } 
}