HTML：计算给定文本将显示的行数[关闭]答案

【问题标题】：HTML: Computing the number of lines that a given piece of text will display [closed]HTML：计算给定文本将显示的行数[关闭]
【发布时间】：2015-02-20 16:32:44
【问题描述】：

给定一个文本块，我想将它分成 N 像素高的部分——显示的行，在应用 CSS 后计算，并向下舍入，以便最终显示整数行数。

然后我想显示文本的偏移量并显示，例如第 100-120 行、第 121-140 行等。

线条的高度可能不一样，并且会换行。

如何通过 JavaScript 做到这一点？

设计目标：

显示一本书，一次一页。
允许读者跳转到特定页面。
将某些文本部分的行放在一起，避免出现孤行（页面顶部或底部的单独行）
让某些样式开始一个新页面（例如章节标题）。

不起作用的事情：

split将文本按字符长度分成固定的块。这不满足任何显示要求。
提前基于ems 计算高度。这无法处理换行。
渲染到屏幕外区域，设置overflow: hidden，并将其固定在较大的负片位置。仍然无法正确计算高度，因此您最终会将线条垂直切成两半。

【问题讨论】：

带有split 计数器和循环。
听起来像是本末倒置。通常你有一个未知高度的区域，应用overflow: auto; 属性并列出该区域内适合的行数。你能给出这样的用例吗？
我添加了更多细节。
您必须向我们提供更多细节。我想说使用split 和一个包含字符数和单词的数据结构。然后你可以循环遍历数据结构并根据需要获取信息。这可能有点矫枉过正，但很难从你给的东西中分辨出来

标签： javascript css

【解决方案1】：

只是一个大纲：

将所有内容放在overflow: hidden 块中。
找到where lines wrap。
将每一行的单词包装在spans 中。如果您有包含内联元素的复杂结构，这可能会更加困难，因为您需要拆分内联元素并将其复制到每个人工创建的行中。（如果您在内联元素上有 ID，这可能变得不可能。）
此时，您可以确定您的结构中只有单行元素并且直接位于overflow: hidden 块下。您现在可以检查高度并确保底部没有显示虚线。您还可以通过计算每个页面开始的偏移高度来进行分页。

玩得开心，因为这不是你可以很快完成的事情。

【讨论】：

【解决方案2】：

此代码将计算行数

var textContainer = $('.text');

textContainer.each(function(){
    var current = $(this);
    var text = current.text();

    var numOfLines = 0;

    var words = text.split(' ');

    current.text(words[0]);
    var height = current.height();

    // loop through text
    for(var i = 1; i < words.length; i++){

        // insert new word
        current.text(current.text() + ' ' + words[i]);

        // height increased?
        if(current.height() > height){
            numOfLines ++;
        }
    }
    console.log(numOfLines);
});

这段代码的目的最初是something else。所以可能会有多余的部分。

您必须将它附加到 DOM 中要显示它的任何位置。 “设计目标”是这个问题的一部分吗？因为它们完全是不同的问题，应该是一个单独的问题。

【讨论】：