css - CSS：突出显示的文本效果

Question

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

#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

Answer 1

尝试将跨度上的显示设置为内联块：

#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 示例

Answer 2

如果您不限于特定的 HTML 标准，您可以查看<mark>HTML5 引入的标签。这个网站让你快速浏览。

希望能帮助到你！

Answer 3

如果有人仍在寻找答案：

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

请参阅此处的 jsfiddle。

Answer 4

解决方案是这个 CSS：

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

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

Answer 5

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

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