使用CSS突出显示文本（标签效果）

Question

我想创建一个类似于标签的文本样式。看这里：

我几乎只能使用：http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

但是，我想添加一些填充。当我这样做的时候，事情会走下坡路。如果我添加边框也会出现相同的情况：http://jsfiddle.net/JN72d/

任何关于实现这种效果的简单方法的想法？

Answer 1

我能够通过修改你的DOM结构来实现它：

http://jsfiddle.net/Zp2Cm/2/

Answer 2

用跨度包裹每一行。将跨度设置为块级别。将背景和填充应用于跨度。

Answer 3

您可以使用<p>和<span>来代替float：

<style type="text/css">
span {
    float: left;
    background: yellow;
    padding: 3px;
    text-transform: uppercase;
    clear: left;
}
</style>

<span>highlighting the text</span>
<span>like this</span>
<span>using just css</span>
<span>is harder</span>
<span>than it looks</span>

请参阅example。

Answer 4

你正在寻找这种东西吗？

有点长啰！ hense在网址44。如果你可以没有p标签，那么你应该没问题

Example

Answer 5

我认为您可以通过将display:inline更改为display:inline-block来实现您的目标。这有一些浏览兼容性问题（取决于您的目标集）：

http://www.quirksmode.org/css/display.html

Answer 6

可以使用<pre>吗？将它格式化为您想要的格式

Answer 7

为您的段落添加跨度，如下所示：

<p class="p1">
    <span>Highlighting the text</span><br/>
    <span>like this</span><br />
    <span>using just CSS</span><br />
    <span>is as easy</span><br />
    <span>as it looks.</span>
</p>

并添加以下CSS：

p.p1{display: inline; background: yellow;}
span {padding: 5px; background: yellow; display: inline-block;}

请注意 display：inline-block 属性。我分叉你的代码：http://jsfiddle.net/eliekhoury/JN72d/27/

Answer 8

这是一项艰巨的任务......

但是:)我找到了一篇很棒的文章！

使用以下解决方案，您可以突出显示Dinamic text而不使用每行的换行。

有演示的文章：http://css-tricks.com/multi-line-padded-text/

享受！）