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

【问题标题】：How to set text background color without spilling past text如何设置文本背景颜色而不溢出过去的文本
【发布时间】：2015-01-13 04:35:39
【问题描述】：

我想：

能够为我的 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 中添加任何其他元素，所以我可以将它作为一个占据屏幕上整行的块。

对于块的显示，我还尝试设置填充和最小宽度，但它不会横向去除溢出文本的额外颜色。

【问题讨论】：

您想仅使用CSS 执行此操作吗？我想使用jQuery / Javascript 会有很好的解决方案。
嗨@northkildonan 感谢您的阅读。是的，它仅适用于 HTML/CSS，此处提供的其他答案实际上对我有用。

标签： html css background-color

【解决方案1】：

一般建议您将文本放入适当的块标签中，即...、<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;
}

更简洁的方法是同时使用-tags 以及其他内联标签，例如-tags：

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

【讨论】：

【解决方案2】：

你需要的是标签，像这样：

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

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

这个标签的默认css设置是：

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

因此您不必显式定义 css，仅以防万一您需要更改颜色。

更新正如misterManSam 指出的那样：

请注意元素具有特殊的语义含义，并且如果您只想“使我的文本变为黄色，则不应使用背景”

【讨论】：

请注意 元素具有a special semantic meaning，如果您只想“使我的文本成为黄色背景”，则不应使用该元素。根据您的内容，您可能需要使用、、、 或
@misterManSam 感谢您指出这一点。我假设用户 is 从一开始就愿意为突出显示的文本赋予特殊的语义含义，这就是我建议使用 标签的原因。因为，你知道，为什么还要突出显示文本？
@Nordenheim - 很公平 :) 提供来自知名来源（例如 w3.org 或 developer.mozilla.org）的参考资料是个好主意，这会（通常）清楚地表明预期的元素目的。
@misterManSam 和 Nordenheim，感谢您对答案的关心并将我的问题编辑为我假设在 SO 社区中更可接受的形式。我一直在看到对语义含义的提及，起初我想，只要我们获得查看 html 页面的人所需的输出，为什么这很重要？但是，对于开发人员和其他阅读代码的人来说，似乎更能更好地理解格式化的意图。这是正确的吗？

【解决方案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/

【讨论】：