CSS：突出显示的文本效果答案

【问题标题】：CSS: highlighted text effectCSS：突出显示的文本效果
【发布时间】：2013-09-15 19:11:58
【问题描述】：

我正在尝试使用一些填充来产生突出显示的文本效果，但填充仅应用于开头和结尾，而不是新行。

#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

请看这里：http://jsfiddle.net/CNJZK/7/

是否有任何纯 CSS 修复来让内部（“锐利”）边缘延伸得更远一点？即像这张图片：http://i.imgur.com/j8mIJZS.jpg

【问题讨论】：

是在较大的文本块中突出显示文本吗？你的例子没有显示这一点，但我觉得这就是你所得到的。
是的。也许这可以澄清：jsfiddle.net/CNJZK/7 在每行的开头/结尾突然停止突出显示，在视觉上，这就是我想要发生的事情：i.imgur.com/j8mIJZS.jpg
How to add horizontal padding to every line in one multi-line wrapped sentence?的可能重复

标签： css highlighting

【解决方案1】：

您需要将显示设置为inline-block 或block。

#highlight {
    display: inline-block;
    /* ... */
}

【讨论】：

一个块在整个文本周围创建一个高亮矩形（包括跨度之前/之后的内容）。我想要适合文本的东西，在行的开头/结尾有一点填充：i.imgur.com/j8mIJZS.jpg
嗯...我想不出办法。对不起。

【解决方案2】：

尝试将 span 上的显示设置为 inline-block：

#highlight {
    background: rgba(255, 230, 0, 0.5);
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}

jsFiddle example

【讨论】：

Inline-block 创建一个矩形的高亮块。我正在寻找缩小到文本（如内联）但延伸得更远的东西。更多的文字也许会更清楚：jsfiddle.net/CNJZK/5

【解决方案3】：

如果您不限于特定的 HTML 标准，您可以查看 HTML5 引入的 <mark> 标记。 This site 让您快速浏览。

希望对你有帮助！

【讨论】：

【解决方案4】：

如果有人还在寻找答案：

p {
    box-shadow: 0px 0px 0px 5px yellow;
    display: inline;
    line-height: 2;
    margin: -5px -5px;
    background-color: yellow;
    border-radius: 1px;
}

See jsfiddle here.

【讨论】：

【解决方案5】：

解决方案是这个 CSS：

-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;

https://css-tricks.com/almanac/properties/b/box-decoration-break/

【讨论】：

谢谢！这是此问题的唯一有效答案。