Wykrywanie linii zawijanych przeglądarki za pomocą javascript

Question

Potrzebuję javascript, aby wykryć każdą zawiniętą linię tekstu przeglądarki i zawinąć ją w <span class="line">.

Natknąłem się na artykuły mówiące o pomiarze osi Y każdego słowa, ale nie widziałem solidnego rozwiązania.

Oto, co mam do tej pory. Zobacz go na 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

muszę przyznać, na początku myślałem, że będzie to trudne zadanie, ponieważ nie ma sposobu na zadanie br owser, aby poinformować Cię, gdzie mają miejsce podziały wierszy automatycznych.

Stworzyłem rozwiązanie, które najpierw owija każde słowo w przęsło, a następnie przechodzi przez wszystkie rozpiętości, aby określić ich najwyższą pozycję w pojemniku. Następnie tworzy zestaw indeksów początkowych i końcowych rozpiętości linii i owija każdą linię przęseł tekstu w zakresie owijania.

Demo:http://jsfiddle.net/KVepp/2/

ewentualnych ograniczeń:

• Przestrzeń dodane na końcu każdego zakresu można może spowodować rozpiętość przełamać do nową linię gdzie tekst nie może.
• Nie jestem pewien, czy po rozpakowaniu linii należy usunąć wszystkie spacje. (Bardzo prosty mod)
• nie ponosi żadnej innej HTML w pojemniku innego niż tekst
• Potrzebuje trochę dodatkowej pracy, aby zostać przekształcona w razie potrzeby plugin dla wielu pojemników
• regex dla słów jest prosta rozłam w przestrzeni. Prawdopodobnie potrzebne dodatkowe regex dla powtarzających przestrzeniach

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">'); 
} 

}