如何使用CSS设置文本宽度的背景色，而不是整个元素的宽度？
我想要的是绿色背景就在文本的后面，而不是页面宽度的100%。下面是我当前的代码：
h1 {
text-align: center;
background-color: green;
}<h1>The Last Will and Testament of Eric Jones</h1>
回答 9
Stack Overflow用户
发布于 2013-01-14 09:12:27
将文本放入inline element中，如<span>。
<h1><span>The Last Will and Testament of Eric Jones</span></h1>然后在inline元素上应用背景色。
h1 {
text-align: center;
}
h1 span {
background-color: green;
}内联元素的大小和它的内容一样大，所以这应该可以帮你完成它。
Stack Overflow用户
发布于 2019-12-04 00:54:57
正如other answers所指出的，您可以在文本周围的<span>中添加一个background-color以使其正常工作。
但是，在使用line-height的情况下，您将看到差距。为了解决这个问题，你可以在你的跨度中添加一个带有一点grow的box-shadow。您还希望FireFox的box-decoration-break: clone;能够正确地呈现它。
编辑:如果你在IE11中遇到了方框阴影的问题，试着只为IE添加一个outline: 1px solid [color];。
下面是它的实际效果：
.container {
margin: 0 auto;
width: 400px;
padding: 10px;
border: 1px solid black;
}
h2 {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
text-transform: uppercase;
line-height: 1.5;
text-align: center;
font-size: 40px;
}
h2 > span {
background-color: #D32;
color: #FFF;
box-shadow: -10px 0px 0 7px #D32,
10px 0px 0 7px #D32,
0 0 0 7px #D32;
box-decoration-break: clone;
}<div class="container">
<h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>
Stack Overflow用户
发布于 2017-09-08 08:10:56
编辑:下面的答案适用于大多数情况。然而，OP后来提到，他们不能编辑CSS文件以外的任何内容。但我会把它留在这里，这样它可能会对其他人有用。
其他人忽略的主要考虑因素是OP声明他们不能修改HTML。
您可以针对DOM中所需的内容，然后使用javascript动态添加类。然后根据您的需要来设计样式。
在我创建的一个示例中，我使用jQuery将所有<p>元素作为目标，并将其包装在一个带有"colored“类的div中
$( "p" ).wrap( "<div class='colored'></div>" );然后在我的CSS中，我以<p>为目标，并为其指定了背景色，并将其更改为display: inline
.colored p {
display: inline;
background: green;
}通过将显示设置为内联，您会丢失一些它通常会继承的样式。因此，请确保您的目标是最具体的元素，并设置容器样式以适合您设计的其余部分。这只是一个工作的起点。请谨慎使用。CodePen上的工作演示
https://stackoverflow.com/questions/14310154
复制相似问题
腾讯云开发者
