我想要的是将绿色背景放在文本后面，而不是 100% 的页面宽度。这是我当前的代码：
h1 {
text-align: center;
background-color: green;
}<h1>The Last Will and Testament of Eric Jones</h1> 【问题讨论】：
将文本放入inline element，例如<span>。
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
然后在内联元素上应用背景色。
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
一个内联元素和它的内容一样大，所以你应该这样做。
【讨论】：
h1 { display:inline; }
尝试移除文本对齐中心并将文本所在的<h1> 或<div> 居中。
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}
【讨论】：
这样做的一个非常简单的技巧是添加一个<span> 标签并为其添加背景颜色。它看起来就是你想要的样子。
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
还有 CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>标签在一个内联元素标签中，所以它只会跨越伪装效果的内容。
【讨论】：
h1 是块级元素。您将需要使用 span 之类的东西，因为它是一个内联级别元素（即：它不跨越整行）。
在你的情况下，我建议如下：
style.css
.highlight
{
background-color: green;
}
html
<span class="highlight">only the text will be highlighted</span>
【讨论】：
游戏有点晚了，但我想我会加我的 2 美分...
为避免添加内部跨度的额外标记，您可以将 <h1> 显示属性从 block 更改为 inline（注意，您必须确保 <h1> 之后的元素是块元素。
HTML
<h1>
The Last Will and Testament of
Eric Jones</h1>
<p>Some other text</p>
CSS
h1{
display:inline;
background-color:green;
color:#fff;
}
结果
JSFIDDLE
http://jsfiddle.net/J7VBV/
【讨论】：
display: table;
h1 {
display: table; /* keep the background color wrapped tight */
margin: 0px auto 0px auto; /* keep the table centered */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}<h1>The Last Will and Testament of Eric Jones</h1>小提琴
http://jsfiddle.net/J7VBV/293/
更多
display: table 告诉元素表现得像一个普通的 HTML 表格。
更多信息请访问w3schools、CSS Tricks 和 here
display: inline-flex;
text-align: center;
.container {
text-align: center; /* center the child */
}
h1 {
display: inline-flex; /* keep the background color wrapped tight */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>display: flex;
.container {
display: flex;
justify-content: center; /* center the child */
}
h1 {
display: flex;
/* margin: 0 auto; or use auto left/right margin instead of justify-content center */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
} <div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>关于
可能是最流行的 Flexbox 指南，也是我经常参考的指南CSS Tricks
display: block;
.container {
display: flex;
justify-content: center; /* centers child */
}
h1 {
display: block;
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>::before
h1 {
display: flex; /* set a flex box */
justify-content: center; /* so you can center the content like this */
}
h1::before {
content:'The Last Will and Testament of Eric Jones'; /* the content */
padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}<h1></h1>小提琴
http://jsfiddle.net/J7VBV/457/
关于
更多关于 css 伪元素 ::before 和 ::after 在CSS Tricks 和一般伪元素在w3schools
display: inline-block;
以position: absolute 和translateX 为中心
需要position: relative 父级
.container {
position: relative; /* required for absolute positioned child */
}
h1 {
display: inline-block; /* keeps container wrapped tight to content */
position: absolute; /* to absolutely position element */
top: 0;
left: 50%; /* part1 of centering with translateX/Y */
transform: translateX(-50%); /* part2 of centering with translateX/Y */
white-space: nowrap; /* text lines will collapse without this */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
} <h1>The Last Will and Testament of Eric Jones</h1>关于
更多关于在this CSS tricks article 中使用transform: translate(); 居中（以及一般居中）
text-shadow: 和 box-shadow:
h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
text-shadow: 0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green;
}
h2 {
text-shadow: -5px -5px 5px green,-5px 5px 5px green,
5px -5px 5px green,5px 5px 5px green;
}
h3 {
color: hsla(0, 0%, 100%, 0.8);
text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 5px hsla(120, 100%, 25%, 1),
0 0 5px hsla(120, 100%, 25%, 1),
0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
text-shadow: 0px 0px 35px green,0px 0px 35px green,
0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
box-shadow: inset 0px 0px 0px 1000px green;
}<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>小提琴
https://jsfiddle.net/Hastig/t8L9Ly8o/
通过结合上述不同的显示选项和居中方法，还有其他几种方法可以解决此问题。
【讨论】：
display: table 会如此强大，但我感谢您提供了可行的替代方案。
试试这个：
h1 {
text-align: center;
background-color: green;
visibility: hidden;
}
h1:after {
content:'The Last Will and Testament of Eric Jones';
visibility: visible;
display: block;
position: absolute;
background-color: inherit;
padding: 5px;
top: 10px;
left: calc(30% - 5px);
}
请注意 calc 并不兼容所有浏览器 :) 只是希望与原帖中的对齐方式保持一致。
【讨论】：
其他人忽略的主要考虑因素是 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上的工作演示
【讨论】：
您可以使用 HTML5 <mark> 标签。
HTML：
<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>
CSS：
mark
{
background-color: green;
}
【讨论】：
你不得不提到h1标签的宽度..
你的 CSS 会是这样的
h1 {
text-align: center;
background-color: green;
width: 600px;
}
【讨论】：
HTML
<h1>
<span>
inline text<br>
background padding<br>
with box-shadow
</span>
</h1>
CSS
h1{
font-size: 50px;
padding: 13px; //Padding on the sides so as not to stick.
span {
background: #111; // background color
color: #fff;
line-height: 1.3; //The height of indents between lines.
box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
}
}
【讨论】：
box-decoration-break: clone;, developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
HTML
<h1 class="green-background"> Whatever text you want. </h1>
CSS
.green-background {
text-align: center;
padding: 5px; /*Optional (Padding is just for a better style.)*/
background-color: green;
}
【讨论】：
正如其他答案所指出的，您可以在文本周围添加 background-color 到 <span> 以使其正常工作。
如果你有line-height，你会看到差距。要解决此问题，您可以添加一个box-shadow，并在您的跨度上增加一点点。您还需要 box-decoration-break: clone; 让 FireFox 正确渲染它。
编辑：如果您在 IE11 中遇到 box-shadow 问题，请尝试添加 outline: 1px solid [color]; 以及仅限 IE。
下面是实际效果：
.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>【讨论】：
<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>【讨论】：
可以在段落和标题标签中使用html5 mark标签。
<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>【讨论】：
<p>lorem ibsum....</p>
有样式：
p{
background-color: #eee;
display: inline;
}
背景设置为元素的整个大小； 修正内联元素和块元素的区别from here
【讨论】：