1

我面前有这种独特的情况，我想创建一个只显示 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>宽度是 600 像素，那么很明显 900 个字不会放在一行中.. 浏览器会将文本换行.. 但是浏览器会做什么来实现这一点，它是否插入一个换行符\n?
  4. 上面的代码对我不起作用，我不知道为什么......如果你有一个线索（我相信你聪明的人肯定知道我做错了什么），请解释一下。所有建议都深表感谢。
4

2 回答 2

3

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

以下作品只要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}
于 2013-08-16T20:57:36.440 回答
1

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

在实践中，我发现这是不准确的。这是一个 jQuery 解决方案（假设我有一个divid 为 的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%;
}

jsFiddle

于 2013-08-16T20:31:21.063 回答