7

ブラウザでラップされたテキストの各行を検出し、それをにラップするには、JavaScriptが必要です<span class="line">。

各単語のy軸の測定について話している記事に出くわしましたが、固溶体は見ていません。

これが私がこれまでに持っているものです。Jsfiddleでご覧ください。

HTML

<div class="inline-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus condimentum metus, et placerat augue rutrum vitae. Donec arcu lorem, eleifend at elementum eget, consectetur vel lacus. Nam euismod iaculis varius. Phasellus sed dui diam. Nullam facilisis, diam sit amet sagittis cursus, metus tortor gravida erat, ut fringilla risus ipsum eu nisl.</div>​

JS / jQuery

(function($){
    $.fn.inlinebackground = function() {
        $.each(this, function(i,t) {
            var split = $(t).html().split(' ');
            var output = '';
            $.each(split, function(i,o){
                output += '<span class="line">'+o+'</span>';
                if (i < (split.length - 1)) {
                    output += '<br>';
                }
            });
            $(t).html(output);
        });
    }
})(jQuery);

/* End Plugin Code */

// Run the plugin on .news-caption 
$(function(){
    $('.inline-bg').inlinebackground();
});

CSS

.inline-bg { width: 200px; line-height:3em; }
.inline-bg span.line { background-color: black; color: white; padding: 15px; }

</ p>

4

1 に答える 1

12

最初は、自動折り返しの改行がどこで行われるかをブラウザに知らせる方法がないため、これは困難な作業になると思っていたことを認めなければなりません。

最初に各単語をスパンでラップし、次にすべてのスパンを調べてコンテナー内の最上位の位置を決定するソリューションを作成しました。次に、行の開始スパンと終了スパンのインデックスの配列を作成し、ワード スパンの各行をラッピング スパンでラップします。

デモ: http://jsfiddle.net/KVepp/2/

考えられる制限:

  • 各スパンの末尾にスペースを追加すると、スパンが改行され、テキストが改行されない可能性があります。
  • 行が折り返されたら、各単語スパンを削除する必要があるかどうかはわかりません。(非常にシンプルなモッド)
  • コンテナ内にテキスト以外の html がないことを前提としています
  • 複数のコンテナで必要な場合は、プラグインに変換するために少し追加の作業が必要です
  • 単語の正規表現は、スペースで単純に分割されます。繰り返されるスペースのために追加の正規表現が必要になる可能性があります

HTML:

<div id="content">Lorem Ipsum<div>

CSS:

#content{ position:relative}

JS:

var $cont = $('#content')

var text_arr = $cont.text().split(' ');

for (i = 0; i < text_arr.length; i++) {
    text_arr[i] = '<span>' + text_arr[i] + ' </span>';
}

$cont.html(text_arr.join(''));

$wordSpans = $cont.find('span');

var lineArray = [],
    lineIndex = 0,
    lineStart = true,
    lineEnd = false

$wordSpans.each(function(idx) {
    var pos = $(this).position();
    var top = pos.top;

    if (lineStart) {
        lineArray[lineIndex] = [idx];
        lineStart = false;

    } else {
        var $next = $(this).next();

        if ($next.length) {
            if ($next.position().top > top) {
                lineArray[lineIndex].push(idx);
                lineIndex++;
                lineStart = true
            }
        } else {
            lineArray[lineIndex].push(idx);
        }
    }

});

for (i = 0; i < lineArray.length; i++) {
var start = lineArray[i][0],
    end = lineArray[i][1] + 1;

/* no end value pushed to array if only one word last line*/
if (!end) {
    $wordSpans.eq(start).wrap('<span class="line_wrap">')
} else {
    $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">');
}

} </p>

于 2012-10-15T00:48:35.400 に答える