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

IT技术 javascript jquery html css
2021-02-15 20:00:58

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

1个回答

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

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

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

}

不确定你在哪里看到最后一个字没有换行。我从没想过只有 1 个字。明天深夜就要调整这里了。还有..什么浏览器?我还没有检查过这个跨浏览器..是非常早期的阶段,可能需要调整
2021-04-26 20:00:58
我用的是 chrome,但在所有浏览器上都是这样。在 jsfiddle 上的示例中查看 html 的源代码。
2021-04-27 20:00:58
对最后一行是一个单词做了一个快速修复。上面也编辑了链接和代码。似乎适用于 FF、Chrome 和 IE jsfiddle.net/KVepp/2
2021-05-02 20:00:58
好的.. 在 Firefox 中,我正在测试它正在处理的字数......而不是在 Chrome 或 IE 中。明天需要一些调整。使所有这些工作都不是一个微不足道的概念。
2021-05-04 20:00:58
谢谢你的回答。它不会包含您示例中的最后一个单词……或者如果只有一个单词。
2021-05-15 20:00:58