通过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/

可能的限制：

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

}​