在一个容器中只显示8行文本

Display only 8 lines of text in a container

本文关键字：显示 8行 文本 一个      更新时间：2023-09-26

我有一个独特的情况，我想创建一个只显示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);

问题：

  1. 我使用的字体不是等宽的，这意味着并非所有字母的宽度都相等
  2. 我不想把WordsPerLine作为参数传递给我要写的函数，我想让它计算这个
  3. 我不确定/找不到浏览器是如何将文本换行的。例如，如果<p>的宽度是600px，那么很明显900个单词不能放在一行中。。浏览器将把文本换行。。但是浏览器是如何做到这一点的，它是否插入了一个换行符'n
  4. 上面的代码不适用于我，我不知道为什么。。。如果你有线索（我相信你们这些聪明人肯定知道我做错了什么），请澄清一下。我们非常感谢所有的建议

在想知道这几次之后，我想出了一个办法，通过渲染字符来预先计算字符的高度和宽度，缓存并生成查找函数。

以下作品只要是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}

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

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

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

jsFiddle

相关文章：