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

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

1 个答案: