javacriptを介してブラウザラップされた行を検出します。

Question

ブラウザの各行を検出して、それを<span class="line">にラップするにはjavascriptが必要です。

各単語の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; } 

Answer 1

brを処理する方法はありませんオートラップ改行がどこで行われるかを伝えるためにowser。

私はスパン内の各単語を最初にラップし、次にすべてのスパンを通過してコンテナ内のトップ位置を決定するソリューションを作成しました。次に、行の開始および終了スパンのインデックスの配列を作成し、各スパンの行を折り返しスパンでラップします。

DEMO：http://jsfiddle.net/KVepp/2/

可能な制限事項：

• スペースは、おそらくどこのテキストがない場合もスパンが に新しい行を壊す恐れがあり、各スパンの最後に追加。
• 行が折り返されると各単語スパンを削除する必要があるかどうかは不明です。
• （非常に簡単なMOD）言葉のために必要な複数のコンテナ用
• 正規表現は、スペースでシンプルな分割された場合。テキスト
• 以外の容器には他の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">'); 
} 

}