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

首先我必须承认，我认为这将是一项艰巨的任务，因为无法通过任务浏览器告诉您自动换行符发生在何处。

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

可能的局限性：

• 在每个跨度末尾添加的空格可能会导致跨度中断到可能不会出现文本的新行。
• 不知道换行后是否需要删除每个单词跨度。（非常简单的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">');
}

}