javascript - 查找可以插入固定宽度、固定字体大小的 div 内的包含空格的字符串数量

Question

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

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

但是我想知道我是使用 javascript 还是 jquery 来实现的？

Answer 1

是的，您可以通过编程来完成。检查this

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

另请检查this链接以获取更多信息。

干杯!!!