0

現在、Webページの列に表示されるテキストを操作しようとしています。実際、私はシミュレートしようとしていCSS3 Multiple Columnsます。

すべてのテキストを含む 1 つの列から始めてHyphenator.js、テキストの品質を向上させるために使用します。その後、最初の非表示の行で分割し、テキストを新しいフローティング div に追加します。未表示のテキストがなくなるまでこれを行いたいです。

私が直面している問題は、レイアウトが流動的で、テキストの特定の行を取得する方法がわからないことです。

まず、長いテキストを非表示にするために使用する親 divの css 属性line-heightと、テキスト div の を抽出することから始めました。しかし、1行にいくつの単語があるかを判断する方法がわからないため、今は行き詰まっています。heightoverflow: 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() を使用して、単語数ではなく、各行の文字数の近似値を計算してみませんか。

文字幅はfont-size（または何か）に等しいため、各行の文字数は、文字幅をdivのouterWidthで割った値に等しくなります。これが理にかなっていることを願っています。

于 2013-09-14T11:51:07.380 に答える