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

我必须首先承认，我认为这将是一项艰巨的任务，因为无法通过任务浏览器告诉您自动换行中断的位置。

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

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

可能的限制：

每个跨度结束时添加的空格可能会导致跨度突破文本可能没有的新行。
一旦换行，不确定是否需要删除每个单词跨度。（非常简单的mod）
假设除了文本
如果需要，还需要一些额外的工作才能变成插件对于多个容器
词汇的正则表达式在空间上是简单的分割。可能需要额外的正则空间的正则表达式

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

}

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

1 个答案: