通过 JavaScript 检测浏览器换行

我需要 javascript 来检测每个浏览器包装的文本行并将其包装到<span class="line">.

我读过一些关于测量每个单词的 y 轴的文章，但还没有看到可靠的解决方案。

这是我到目前为止所拥有的。看到它Jsfiddle http://jsfiddle.net/6VqMq/3/.

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

​

我必须承认，一开始我认为这将是一项艰巨的任务，因为任务浏览器无法告诉您自动换行符发生在哪里。

我创建了一个解决方案，首先将每个单词包装在一个跨度中，然后遍历所有跨度以确定它们在容器中的顶部位置。然后，它构建行开始和结束跨度的索引数组，并将每行字跨度包装在包装跨度中。

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

可能的限制：

• 在每个跨度末尾添加的空格可能会导致跨度中断 文本可能没有的新行。
• 不确定换行后是否需要删除每个单词跨度。 （非常简单的模组）
• 假设容器中除了文本之外没有其他 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">');
}

}​