CSS：高亮文字效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18746649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: highlighted text effect
提问by Caspid
I'm trying to produce a highlighted text effect with a bit of padding, but the padding is only applied to the beginning and end, not new lines.
我试图用一点填充来产生突出显示的文本效果，但填充仅应用于开头和结尾，而不是新行。
#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>
Please see here: http://jsfiddle.net/CNJZK/7/
请看这里：http: //jsfiddle.net/CNJZK/7/
Are there any pure-CSS fixes to get the internal ("sharp") edges to extend a bit farther? i.e. like in this image: http://i.imgur.com/j8mIJZS.jpg
是否有任何纯 CSS 修复可以使内部（“锐利”）边缘延伸得更远一些？即像这张图片：http: //i.imgur.com/j8mIJZS.jpg
回答by j08691
Try setting the display on your span to inline-block:
尝试将 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;
}
回答by Beejay
回答by Ima
Solution is this CSS:
解决方案是这个CSS：
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;
https://css-tricks.com/almanac/properties/b/box-decoration-break/
https://css-tricks.com/almanac/properties/b/box-decoration-break/
回答by Nathan Upchurch
In case anyone is still looking for an answer:
如果有人仍在寻找答案：
p {
box-shadow: 0px 0px 0px 5px yellow;
display: inline;
line-height: 2;
margin: -5px -5px;
background-color: yellow;
border-radius: 1px;
}
回答by crush
You need to set the display to inline-blockor block.
您需要将显示设置为inline-block或block。
#highlight {
display: inline-block;
/* ... */
}
