Preciso de javascript para detectar cada linha de texto envolvida no navegador e envolvê-la<span class="line">.

Eu me deparei com artigos falando sobre a medição do eixo y de cada palavra, mas não vi uma solução sólida.

Aqui está o que eu tenho até agora. Ver emJsfiddle.

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

​