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

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

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