通过javascript检测浏览器包装行

我需要javascript来检测每个浏览器包装的文本行，并将其包装成

我曾读过一些关于测量每个单词的y轴的文章，但还没有看到一个解决方案

这是我到目前为止所拥有的。在电视上看

HTML

---

​

我必须承认，一开始我认为这将是一项艰巨的任务，因为无法通过任务浏览器告诉您自动换行在哪里发生

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

演示：

可能的限制：

• 在每个跨度末端添加的空间可能会导致跨度断裂 文本可能不存在的新行
• 不确定在换行后是否需要删除每个单词范围。（非常简单的mod）
• 假定容器中除了文本之外没有其他html
• 需要一点额外的工作，以成为一个插件，如果需要的话 对于多个容器
• 单词的正则表达式是在空格处简单拆分的。可能需要额外的 循环空间的正则表达式

HTML:

JS:

var$cont=$（“#content”）
var text_arr=$cont.text（）.split（“”）；
对于（i=0；itop）{
lineArray[lineIndex].push（idx）；
lineIndex++；
lineStart=true
}
}否则{
lineArray[lineIndex].push（idx）；
}
}
});
对于（i=0；i

---

}​

谢谢你的回答。它没有把你的例子中的最后一个词包装起来。。。或者，如果只有一个单词，不确定在哪里可以看到最后一个单词没有包装。我从来没有只想到一个词。明天这里是深夜，我们必须做出调整。还有…什么浏览器？我还没有检查过这个跨浏览器。这是非常早期的阶段，可能需要调整。我使用的是chrome，但在所有浏览器上都是这样。在jsfiddle.OK.上查看示例中的html源代码。。在我测试的Firefox中，它正在处理大量的单词。。。不在Chrome或IE中。明天需要进行一些调整。这不是一个简单的概念，让所有这些工作。做了一个快速修复的最后一行是一个字。编辑了上面的链接和代码。似乎在FF、Chrome和IE中工作

<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>​

(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();
});

.inline-bg { width: 200px; line-height:3em; }
.inline-bg span.line { background-color: black; color: white; padding: 15px; }

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

#content{ position:relative}

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