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

本文介绍了通过javascript检测浏览器包装的行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要javascript来检测每个浏览器包装的文本行，并将其包装到< span class =line> 。

I need javascript to detect each browser wrapped line of text and wrap it into <span class="line">.

我遇到了关于测量每个单词的y轴的文章，但没有看到一个坚实的解决方案。

I came across articles talking about measuring the y axis of each word, but have not seen a solid solution.

这是我到目前为止。请参阅。

Here's what I have so far. See it on 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

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

推荐答案

我不得不承认起初我认为这将是一个艰巨的任务，因为没有办法任务浏览器告诉你在哪里汽车换行中断发生。

I have to admit at first I thought this would be a daunting task since there is no way to task browser to tell you where auto wrap line breaks take place.

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

I've created a solution that first wraps each word in a span, then goes through all the spans to determine their top position in container. It then builds an array of indexes of line start and end spans and wraps each line of word spans in a wrapping span.

DEMO： a href =http://jsfiddle.net/KVepp/2/> http://jsfiddle.net/KVepp/2/

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

可能的限制：

在每个跨度结束时添加的空间可能会导致跨度突破为
a

不确定每行字段是否需要在换行后删除。（非常简单的mod）

假设容器中除文本外没有其他html

需要一些额外的工作才能转换为插件b $ b用于多个容器

单词的regex是在空间进行简单拆分。可能需要额外的
regex用于循环空间

Space added at end of each span may perhaps cause a span to break toa new line where text may not.
Not sure if each word span needs to be removed once lines are wrapped. ( very simple mod)
Assumes no other html in container other than text
Needs a little additional work to be turned into a plugin if neededfor multiple containers
regex for words is simple split at space. Likely need additionalregex for recurring spaces

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检测浏览器包装的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！