0

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

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

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

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

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

4

1 回答 1

0

我不是 100% 确定你在问什么，但无论如何让我试一试。

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

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

于 2013-09-14T11:51:07.380 回答