获取 div 中的特定文本行

Question

目前我正在尝试处理网页上以 cols 显示的文本。 事实上我正在尝试模拟CSS3 Multiple Columns。

我从包含所有文本的一列开始，使用Hyphenator.js 来提高文本质量，然后我想在第一条不可见行处拆分并将文本添加到新的浮动 div。我想这样做，直到我没有未显示的文本。

我面临的问题是，布局是流畅的，我不知道如何获得特定的文本行。

我首先提取 css 属性 line-height、使用 overflow: hidden; 隐藏较长文本的父 div 的 height 和 text-div 的 height。但是现在我被卡住了，因为我无法确定一行中有多少个单词。

我还尝试使用正则表达式将文本拆分为句子。并一个接一个地添加，直到 div 的高度对于周围的高度来说太大了。但是有了这个我没有Hyphenator.js的好处。

这是我的html的摘录：

<div class="col col_2">
    <div class="col_content">
        <h1>Lorem Ipsum dolor sit amet</h1>
        <div class="text">
            <div class="start_col hyphenate">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,                      
            </div>
        </div>
    </div>
</div>

处理完成后start_col将被隐藏，以在用户调整窗口大小时使用原始文本。

这是我用来将文本拆分成句子的正则表达式：

var sentences = $(this).text().replace(/\.+/g,'.|').replace(/\?/g,'?|').replace(/\!/g,'!|').split("|");
var temp = [];
for(var i = 0; i < sentences.length; i++)
{
    var sentence = $.trim(sentences[i]);
    if(sentence !== "")
        temp.push(sentence);
    sentences = temp;
}

但就像我之前写的那样，我无法从 Hyphenator.js 中受益。

如果我在某些方面不清楚，我会很乐意解释更多。

Answer 1

我不能 100% 确定你在问什么，但还是让我试一试吧。

为什么不在 jQuery 中使用 strlen() http://www.w3schools.com/php/func_string_strlen.asp 和 outerWidth() 来计算每行有多少个字符，而不是多少个单词。

字符宽度将等于字体大小（或其他东西） 所以每行的字符数等于字符宽度除以div的outerWidth。希望这是有道理的。