使用CSS实现文本高亮（标签效果）

Question

我想创建一个类似标签的文本样式，如下所示：。我可以使用以下内容实现类似效果：http://jsfiddle.net/STApE/。

p{display: inline; background: yellow;}

但是，我想增加一些填充。但是，这样做会导致问题。如果我添加边框也会出现同样的情况：http://jsfiddle.net/JN72d/。您有简单的方法来实现这种效果吗？

- theorise

---

不太清楚您想要实现什么样的效果。请提供更多信息，说明您想要的外观是什么，而不是您认为应该如何对其进行排序。(例如，填充) - anothershrubery

@anothershrubery：一张图片胜过千言万语？ - Stephen

@anothershrubery 这张图片外面有一小段留白，与我发布的 jfiddle 链接相比尤其明显，那里的文本与黄色背景完全对齐。不过你说得对，我应该在图片中增加一些留白。 - theorise

我在图片中看到了填充。 - Stephen

肯定是5像素，也许是1或2，这可能让我感到困惑。 - anothershrubery

Answer 1

我通过稍微修改你的DOM结构就能实现它： http://jsfiddle.net/Zp2Cm/2/

- Stephen

---

这很有效。感觉有点乱，但是这种样式通常只用于少量文本，所以我想这没什么大问题。 - theorise

其实，我之前的代码中有可怕的<br />，所以这并没有太大的区别。谢谢。 - theorise

SPAN包裹的意义是什么？如果在95%的情况下文本应该是动态的，并且其长度随时可以更改，那么SPAN包裹还有什么意义呢？..这种解决方案只对静态文本有用。 - Andrii Verbytskyi

Answer 2

将每一行文本包装在标签内。将设置为块级元素。对应用背景和内边距。

- Chris

Answer 3

你可以使用<span>和float，而不是<p>：

<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>

请查看示例。

- Saul

Answer 4

这是你要找的东西吗？

有点啰嗦！因此在URL中有44。如果您可以不使用p标签，那么对您来说应该没问题。 示例

- AJFMEDIA

---

不像使用 p 和 span 标签那样语义化，但它可以工作。+1 - Stephen

Answer 5

在编程中，将类似这样的span添加到您的段落中：

<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属性。我fork了你的代码：http://jsfiddle.net/eliekhoury/JN72d/27/

- Elie

---

我会去掉 br 标签，使用 display block 并浮动到左侧。这样可以减少标记。 - Stephen

Answer 6

我认为您可以通过将 display:inline 更改为 display:inline-block 来实现您想要的效果。这可能会在某些浏览器上出现兼容性问题（具体取决于您的目标设备）。

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

- Rob

---

这个不起作用。这会使整个p标签变成黄色块。 - Stephen

Answer 7

可以使用<pre>标签吗？这样可以按照您想要的格式进行排版

- benhowdle89

---

我实际上从未使用过 <pre>，你到底是什么意思？ - theorise

我认为<pre>可能是一个很好的使用案例...嗯...也许吧。出于某种原因，除非您更改答案，否则我无法给您+1。您能否更新并提供一个示例？ - Stephen

Answer 8

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

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

通过以下解决方案，您可以使您的动态文本在不使用每行换行符的情况下突出显示。

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

享受吧！)

- Andrii Verbytskyi