通过javascript检测浏览器包装的行

Question

我需要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; }

​

Answer 1

我不得不承认,一开始我认为这将是一项艰巨的任务,因为没有办法让浏览器告诉你自动换行中断的位置.

我创建了一个解决方案,首先在一个范围内包装每个单词,然后遍历所有跨度以确定它们在容器中的最高位置.然后,它构建一个行开始和结束跨度的索引数组,并在换行范围内包装每行单词.

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

}