如何限制每行文字的数量为固定宽度？

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; 
    } 
}