通过JavaScript检测浏览器自动换行

Question

通过JavaScript检测浏览器自动换行

javascriptjqueryhtmlcss

8

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

- Timofey Drozhzhin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- charlietfl · Accepted Answer

一开始我认为这将是一项艰巨的任务，因为没有办法让浏览器告诉你自动换行线断在哪里。

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

演示： http://jsfiddle.net/KVepp/2/

可能存在的限制：

在每个 span 结尾添加空格可能会导致一个 span 断成新行，而文本并不需要。
不确定是否需要在行被包装后移除每个单词 span。（非常简单的修改）
假设容器中没有其他 HTML 代码
如果需要针对多个容器，还需要进行一些额外的工作才能将其转化为插件
用于单词的正则表达式是以空格分割的。可能需要针对重复空格使用其他正则表达式

HTML：

<div id="content">Lorem Ipsum<div>

CSS：

#content{ position:relative}

JS:

->

JavaScript：

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

}