Question

给定一个文本块，我想把它分成N个像素高的部分 - 显示的行，在应用CSS后计算，然后向下舍入，最后显示整数个行文本。< / p>

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

这些线条可能并非全部都是相同的高度，并且会包裹。

你怎么能用JavaScript做到这一点？

设计目标：

一次显示一本书。
允许读者跳转到特定页面。
为某些文字部分保持线条，避免寡妇/孤儿（页面顶部或底部的单行）
让一些样式开始新页面（例如章节标题）。

不起作用的事情：

split按字符长度将文本转换为固定的块。这不符合任何显示要求。
提前根据em计算身高。这不能处理包装线。
渲染到离屏区域，设置overflow: hidden，并将其固定在较大的负位置。仍然无法正确计算高度，因此您最终会将线条垂直切成两半。

Answer 1

此代码将计算行数

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中。 “设计目标”是这一个问题的一部分吗？因为它们完全是不同的问题，应该是一个单独的问题。

Answer 2

只是一个大纲：

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

有趣的编码，因为它不是你可以很快做的事情。

HTML：计算给定文本将显示的行数

2 个答案: