Question

我面前有这种独特的情况，我想要创建一个只显示8行文字的功能。该网站响应迅速。这是我尝试过的：

var fontSize = $target.css("font-size").match(/\d/g).join(""),
lineWidth = $target.width(),
totalLetters = $target.text().length,
lettersPerLine = (totalLetters * fontSize) / lineWidth,
numOfLines = Math.round(totalLetters/lettersPerLine);

问题：

我使用的字体不是等宽字体，这意味着并非所有字母都具有相同的宽度。
我不想将WordsPerLine作为参数传递给我要编写的函数，我希望它能够计算出来
我不确定/无法找出浏览器将文本换行到新行的操作。例如，如果<p>宽度为600px，那么显然900字不适合一行......浏览器会将文本换行到新行..但是浏览器做了什么来实现这一点，是吗？插入换行符\n？
上面这段代码对我不起作用，我不知道为什么......如果你有一个线索（我相信你聪明的人肯定知道我做错了什么），请说清楚。所有建议都深表赞赏。

Answer 1

在想要知道这几次之后，我想出的一个灵魂就是通过渲染它们来预先计算角色的高度和宽度，缓存它并产生查找功能。

只要呈现body > span，以下工作即可。参数是可选的，默认为body > span的样式和字体的第一个255字符。

function charSizes(numChars, cssFont) {
    var span = document.createElement('span'),
        text = document.createTextNode(''),
        uia, i, j;
    span.appendChild(text);
    if (cssFont) span.style.font = cssFont;
    span.style.padding = span.style.margin = 'none';
    document.body.appendChild(span);
    numChars = (numChars || 255);
    uia = new Uint32Array(numChars * 2);
    for (j = i = 0; i < numChars; j = 2 * ++i) {
        text.data = String.fromCharCode(i);
        uia[j] = span.offsetWidth;
        uia[j + 1] = span.offsetHeight;
    }
    // free memory
    document.body.removeChild(span);
    span = text = numChars = cssFont = null;
    // output lookup function
    return function (c) {
        var i = c.charCodeAt(0) * 2;
        return {
            width: uia[i],
            height: uia[i + 1]
        };
    };
}

var arial12 = charSizes(0xFF, '12px Arial');

现在您可以轻松查找字符

arial12('a'); // {width: 7, height: 15}
arial12('-'); // {width: 5, height: 15}

Answer 2

简单的css解决方案是将容器的高度设置为8em并将溢出设置为hidden。

在实践中，我发现这是不准确的。这是一个jQuery解决方案（假设我有div，其id为bozo）：

的JavaScript

function getFontHeight(className) {
    $testdiv = $('<div stlye="white-space:nowrap;">jgpqAZ</div>');
    if (className) $testdiv.addClass(className);
    $('body').append($testdiv);
    var height = $testdiv.innerHeight();
    $testdiv.remove();
    return height;
}

$('#bozo').height(getFontHeight() * 8);

CSS

#bozo {
    overflow: hidden;
    width:100%;
}

在容器中仅显示8行文本

2 个答案:

的JavaScript

CSS

jsFiddle