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

- Caspid

---

你的想法是在一大段文本中突出显示某些文本吗？虽然你的例子没有展示这个，但我感觉这就是你想表达的。 - James Montagne

是的。也许这可以澄清：http://jsfiddle.net/CNJZK/7/会在每行开头/结尾突然停止高亮显示，而从视觉上看，我希望发生这种情况：http://i.imgur.com/j8mIJZS.jpg。 - Caspid

可能是重复的问题：如何在一个多行折叠的句子中为每一行添加水平填充？ - James Montagne

Answer 1

尝试将您的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 实例

- j08691

---

Inline-block创建了一个高亮的矩形块。我正在寻找一些东西，它可以像内联元素一样缩小到文本大小，但是可以稍微扩展一点。也许通过更多的文本会更清晰：http://jsfiddle.net/CNJZK/5/ - Caspid

Answer 2

如果没有限制特定的HTML标准，您可以查看使用HTML5引入的标记。这个网站可以给您一个快速的概述。

希望能对您有所帮助！

- Beejay

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。

- Nathan Upchurch

Answer 4

解决方案是这个CSS：

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

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

- Ima

---

谢谢！这是这个问题唯一可行的答案。 - Iguanodon

Answer 5

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

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

- crush

---

一个块会在整个文本周围（包括跨度之前/之后的内容）创建一个高亮的矩形。 我希望能够适应文本，并在行的开头/结尾增加一些填充：http://i.imgur.com/j8mIJZS.jpg - Caspid

嗯...我想不出来办法。抱歉。 - crush