Question

Webkit中是否存在类似-moz-background-inline-policy的内容？此属性基本上使您有机会指定如何为内联元素的每一行呈现背景。我在不同的浏览器上附加相同元素的图像。

这是firefox上的结果（-moz-background-inline-policy: each-box;）

Firefox

这是在谷歌浏览器上（我已尝试-webkit-background-inline-policy，但它似乎不存在）

Google Chrome

更新

由于Webkit上没有后台策略属性，我正在尝试使用jQuery找到不同的解决方案。我在每行文本后面添加了一个额外的跨度。没关系，除了文本没有正确测量的事实。您可以在此处查看两个示例：

原始解决方案（背景内联政策）：http://jsfiddle.net/notme/mCnGy/5/
新解决方案（jQuery spans）：http://jsfiddle.net/notme/my3br/1/

解

//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: 'absolute',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

//thanks @thirtydot
var fixIt = function() {
    //remove previous .dummy
    $('.dummy').remove();

    $('div.node-title-text').each(function(index) {

        var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
        console.log(dummy);
        $(dummy).wrapLines('<span><span>', '</span></span>');

        var padding = 15;

        dummy.css({
            left: -padding,
            right: -padding
        }).find(' > span').css('padding-left', padding*2);

    });
};

$(window).load(function(){
    $(window).resize(fixIt).resize(); //trigger resize event onLoad
});

Answer 1

这样可行，但可能会提高效率：

http://jsfiddle.net/thirtydot/UGBXD/3/

以下是后人的完整代码：

<强> JS ：

//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: 'absolute',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

var fixIt = function() {
    $('.dummy').remove();

    $('div.node-title-text').each(function(index) {
        //remove previous .dummy
        var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
        $(dummy).wrapLines('<span><span>', '</span></span>');
    });
};
$(window).resize(fixIt).resize(); //trigger resize event onLoad

<强> CSS：

.node-title {
    position: relative;
    margin-bottom: 16px
}
.node-title-text {
    position: relative;
    z-index: 2
}
.dummy {
    position: absolute;
    top: 0; left: 0;
    z-index: 1
}
.dummy > span {
    background: url('http://i.stack.imgur.com/HPofR.png') top left no-repeat,
        url('http://i.stack.imgur.com/C8ImH.png') top right no-repeat,
        url('http://i.stack.imgur.com/9is9r.png') top center repeat-x;
}
.dummy > span > span {
    visibility: hidden
}

HTML：（与您的相同）

<div class="node-title">
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed suscipit fermentum leo eu scelerisque.</a>
    </div>
</div>

Answer 2

此非标准功能未在其他浏览器中实现。您需要在一个范围中包裹每一行，然后将背景应用于该范围。

如果您需要动态文本，可以使用javascript为您整理范围，但如果可以对其进行硬编码，那么它应该不会太复杂。

webkit上的-moz-background-inline-policy

更新

解

2 个答案: