在容器中只显示8行文字 [英] Display only 8 lines of text in a container

问题描述

我有这种独特的情况在我面前，我想创建一个函数，只显示8行文本。网站是响应。这是我试过的：

I have this unique situation in front of me where i want create a function to show only 8 lines of text whatsoever. The website is responsive. Here is what i have tried:

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> width是600px，那么很明显，900个单词不适合在一行..浏览器会将文本换行。但是浏览器做什么来实现这一点，它插入一个新行字符 \\\
？


4. 上面的代码不为我工作，我不知道为什么...如果你有一个线索（我相信你聪明的人肯定知道我做错了），请散发一些光。
   所有建议都深深感谢。

1. The font i am using is not monospaced which means that not all the letters are of equal width.
2. I dont want to pass WordsPerLine as a parameter to the function i will write, i want it to calculate this
3. I am not sure/cannot find out what the browser does to wrap text to new lines. For example, if the <p> width is 600px then it is obvious that 900 words wont fit in one line.. the browser will wrap the text to new lines.. but what does the browser do to achieve this, does it insert a new line character \n ?
4. The above piece of code does not work for me and i don't no why...if you have a clue (which i am sure you smart people definitely know what i am doing wrong), please shed some light. All suggestions are deeply appreciated.

推荐答案

时间，我想出的是一个预先计算字符的高度和宽度，通过渲染它们，缓存和产生一个查找函数。

After wanting to know this a few times, a soultion I came up with is pre-calculating the height and width the characters by having them rendered, cache this and produce a lookup function.

只要 body> span 。参数是可选的，默认为 body> span 和字体的第一个 255 字符。

The following works as long as body > span will be rendered. The parameters are optional, defaulting to the style of body > span and the first 255 chars of the font.

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

现在可以轻松查找字符了。

Now you can look up characters easily

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

这篇关于在容器中只显示8行文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！