7

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

​</p>

4

1 回答 1

12

我必须承认，起初我认为这将是一项艰巨的任务，因为任务浏览器无法告诉您自动换行换行发生的位置。

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

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

}​</p>

于 2012-10-15T00:48:35.400 回答