Question

我有一个Div，它没有固定的高度或宽度。 div将包含一些文本，字符串的长度不能修复。如果String太长而不适合div，则文本将出现在div之外，我需要知道div可以根据它的宽度和高度包含多少String的最大长度。

Answer 1

除非您使用固定宽度字体，其中所有字符的宽度相同（这是不寻常的），否则您的问题没有答案。在给定宽度中适合多少个字符取决于字符的含义，因为“W”等字符比所有可变宽度字体中的“i”字符宽得多。

如果您使用的是固定宽度字体，则需要测量字符在字体中的宽度以及您使用的字体大小和字体样式。然后，您可以简单地将宽度除以字符宽度，并确定适合的字符数。

可以通过创建没有边距，填充或边框的div，将样式设置为position: absolute，在其上设置所需的字体系列和字体大小并放置一个字体来测量固定宽度字体div中的角色。然后，您可以通过获取它的offsetWidth来获取div的宽度。

有关简单示例，请参阅http://jsfiddle.net/jfriend00/kHHU7/。

这是一个以固定宽度字体测量字符宽度的函数：

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

您可以在此处查看：http://jsfiddle.net/jfriend00/y4eZr/

Answer 2

也许最好使用css overflow：隐藏在div上？

Answer 3

我会查看jQuery插件dotdotdot来处理这个问题。您不需要知道多长时间，它将为您完成将文本截断到适当长度的所有工作。

Answer 4

分隔符元素是流体容器元素，并不是真正设计用于执行此类操作。

我能想到的最好的方法是将div的clientWidth除以假定的字体宽度。

var maxChars = div.clientWidth / 5;

JQuery找到div可以包含的字符串的长度

4 个答案: