javascript - 找到可以插入到固定宽度和固定字体大小的 div 中的字符串的数量，包括空格

Question

我想知道我是否可以预测字符串的数量，包括可以以编程方式插入固定宽度和固定字体大小的 div 中的空格。我有一个不同宽度的 div，我在其中动态添加名称。 .所以宽度会根据该名称的一些密度度量而变化..我知道我可以使用css方法，如

        "white-space", "nowrap"
        "overflow", "hidden"
        "text-overflow", "ellipsis"

但我想知道我是用javascript还是jquery来做的？

Answer 1

是的，您可以以编程方式进行。检查这个

var wid = $("div").width();
var allowedChars = parseInt(wid/getCharWidth('Courier New', '10px'));

var div = $("div");
for(var i = allowedChars; i > 0; i--) {
   $(div).append("a");
}

function getCharWidth(fontFamily, fontSize) {
 var div = document.createElement("div");
 div.style.position = "absolute";
 div.style.visibility = "hidden";
 div.style.fontFamily = fontFamily;
 div.style.fontSize = fontSize;
 div.innerHTML = "S";
 document.body.appendChild(div);
 var width = div.offsetWidth;
 document.body.removeChild(div);
 return(width);
}

另请查看此链接以获取更多信息。

干杯！！！