Question

目前我正在尝试使用网页上cols中显示的文本。实际上我正在尝试模拟CSS3 Multiple Columns。

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

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

我首先提取了css属性line-height，使用height隐藏较长文本的父div的overflow: hidden;和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

我不是百分之百确定你所问的是什么，但无论如何，让我试一试。

为什么不在jQuery中使用strlen（）http://www.w3schools.com/php/func_string_strlen.asp和outerWidth（）来计算每行上多少个字符的近似值，而不是多少个单词。

字符宽度等于font-size（或其他）所以每行的字符数等于字符宽度除以div的outerWidth。希望这是有道理的。

在div中获取特定的文本行

1 个答案: