CSS：突出显示文本效果

本文介绍了CSS：突出显示文本效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<$ p

我尝试使用一点填充产生高亮显示的文字效果，但填充只适用于开头和结尾， $ p>

 #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>此处< / span>

请参阅这里：

有任何纯CSS修补程序来获取内部锋利）边缘延伸一点更远？
ie like like this image：

解决方案

尝试将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; 
}

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/

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

解决方案

Try setting the display on your span to 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

这篇关于CSS：突出显示文本效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Highlight

CSS：突出显示文本效果

问题描述