Tespit tarayıcı sarılmış çizgiler javascript

Question

aracılığıyla Ben metnin her tarayıcı sarılı çizgiyi algılayıp <span class="line"> içine kaydırmak için JavaScript.

ben her kelimenin y ekseni ölçme bahsediyor makale karşılaştım, ama sağlam bir çözüm görmedik.

Şimdiye kadar sahip olduğum şeyler. Jsfiddle'da bakın.

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(); 
}); 

İlk başta kabul etmek bu yana zor bir görev olacağını düşündüm

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

Answer 1

CSS br görevine giden yol yok Otomatik sarma hattının nerede kırılacağını size söyleyen baykuş. Önce bir süre içinde her kelimeyi sarar bir çözüm oluşturduk

ardından kapta ilk sıradaki yerini belirlemek için tüm span geçer. Daha sonra, bir dizi satır başlangıç ​​ve bitiş dizilimi dizisi oluşturur ve her bir kelime kapsamı sırasını bir sarma aralığına kaydırır.

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

Olası Sınırlamalar:

• Uzay her açıklığın sonunda eklenen belki yayılma için yeni bir satır kırmaya nerede metin olmayabilir neden olabilir. her bir kelime aralığı hatları sarılmış bir kez kaldırılması gerekir ise
• emin. (Mod çok basit)
• birden konteynerler için
• regex kelimeler için boşlukta basit bölünmüş olup gerekirse bir eklenti haline getirilmek için biraz ek çalışma gerektiriyor metin dışında kapta başka hiçbir html varsayar. Olasılıkla yinelenen alanlar
için ek regex gerek

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

}