Question

我想：

能够在我的HTML页面上设置一些文本的样式，以便某种背景颜色仅覆盖文本，而不是覆盖它。
理想情况下，我想从一个div中控制它。

以下是我的jsfiddle：

#edit_this_div {
  min-width: 0px;
  background-color: yellow;
}
#bad_way {
  background-color: yellow;
  display: inline-block
}

<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>

我尝试了什么： 我想到实现这个的方法是将div设置为内联块，我也在我的jsfiddle中显示。但是，我宁愿不这样做因为我觉得它会使事情复杂化;当我这样做时，我的块开始跳跃并与其他元素结合。我不打算在div中使用任何其他元素，所以我可以将它作为一个占据屏幕整行的块。

通过块的显示，我也尝试设置填充和最小宽度，但它没有横向影响，以消除溢出文本的额外颜色。

Answer 1

您需要的是<mark></mark>标记，如下所示：

<p>Do not forget to buy <mark>milk</mark> today.</p>

这是你的小提琴： http://jsfiddle.net/am9rzfmd/

此标记的默认css设置为：

mark {
    background-color: yellow;
    color: black;
}

所以你不必明确定义css，只是为了你需要改变颜色。

<强>更新正如misterManSam所指出的那样：

请注意，该元素具有特殊的语义含义如果你只是想让我的文字变成黄色，就不应该使用它背景“

Answer 2

通常建议您将文字放入适当的块标记，即<p>...</p>，<h1>...</h1>，<blockquote>...</blockquote>等。

如果你这样做，那将很容易，例如：

<div id="edit_this_div">
    <p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>

然后是CSS：

#edit_this_div p {
    background-color: yellow;
    display: inline;
}

更干净的是使用<p> - 标签以及其他内联标签，例如<span> - 标签：

<div id="edit_this_div">
    <p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>

CSS：

#edit_this_div p span {
    background-color: yellow;
    display: inline;
}

Answer 3

将它从div更改为span，它只会将其宽度拉伸到其中的内容。

<body>
    <span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
    <br>
    <br>
    <span id="bad_way">This is the inefficient and manual way.</span>
</body>

http://jsfiddle.net/bbv5ryhk/

如何设置文本背景颜色而不溢出过去的文本

3 个答案: