3

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

4

4 回答 4

4

除非您使用所有字符宽度相同的固定宽度字体（这很不寻常），否则您的问题没有答案。给定宽度能容纳多少个字符取决于字符是什么，因为在所有可变宽度字体中，像“W”这样的字符比像“i”这样的字符宽得多。

如果您使用的是固定宽度的字体，那么您需要测量一个字符在您使用的字体中的宽度以及字体大小和字体样式。然后，您可以简单地将您拥有的宽度除以字符宽度并确定可以容纳多少个字符。

可以测量固定宽度的字体，方法是创建一个没有边距、填充或边框的 div，将样式设置为position: absolute，在其上设置所需的 font-family 和 font-size 并将一个字符放入 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/

于 2012-05-25T23:49:46.960 回答
1

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

于 2012-05-25T23:57:05.520 回答
1

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

于 2012-05-26T00:09:29.167 回答
0

Divider 元素是流体容器元素，并不是真正设计来做这种事情的。

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

var maxChars = div.clientWidth / 5;

于 2012-05-25T23:54:04.773 回答