编辑:下面的答案适用于大多数情况。然而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上的工作演示

选项1

显示:表;

不需要家长

h1 { 显示:表;/*保持背景色紧密包裹*/ Margin: 0px auto 0px auto;/*保持表格居中*/ 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>

小提琴

http://jsfiddle.net/J7VBV/293/

more

display: table告诉元素像一个正常的HTML表一样运行。

更多信息请访问w3schools, CSS Tricks和这里

---

选项2

显示:inline-flex;

要求文本对齐:中心;在父

.container { text-align:中心;/*居中子节点*/ ｝ h1 { 显示:inline-flex;/*保持背景色紧密包裹*/ 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ < div class = "容器" > <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1> < / div >

---

选项3

显示:flex;

需要一个灵活的父容器

.container { 显示:flex; justify-content:中心;/*居中子节点*/ ｝ h1 { 显示:flex; /* margin: 0 auto;或者使用自动左/右边距代替justify-content center */ 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ < div class = "容器" > <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1> < / div >

关于

也许最受欢迎的Flexbox指南和我经常参考的是CSS Tricks

---

选项4

显示:块;

需要一个灵活的父容器

.container { 显示:flex; justify-content:中心;/*中心子*/ ｝ h1 { 显示:块; 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ < div class = "容器" > <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1> < / div >

---

选择5

::之前

需要在CSS文件中输入单词(不太实用)

h1 { 显示:flex;/*设置伸缩盒*/ justify-content:中心;/*所以你可以将内容居中*/ } {前h1:: 内容:“埃里克·琼斯的最后遗嘱”;/*内容*/ background-color:绿色;color: #ffffff; } <标题> < / h1 >

小提琴

http://jsfiddle.net/J7VBV/457/

关于

关于css伪元素::before和::after的更多信息请参见w3schools中的css技巧和伪元素

---

选择6

显示:inline-block;

位置定心:absolute和translateX 要求一个职位:相对父母

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

关于

关于transform: translate()居中的更多信息;(和一般的居中)在这篇CSS技巧文章

---

选择7

文本阴影:和框阴影:

不是OP要找的，但可能对其他人找到这里有帮助。

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/

更多的选择

通过结合上面的不同显示选项和居中方法，还有其他一些方法可以做到这一点。

正如其他答案所指出的那样，您可以在文本周围的<span>中添加背景颜色以使其工作。

在有行高的情况下，你会看到空白。为了解决这个问题，你可以在你的跨度上添加一个盒子阴影。你还需要box-decoration-break: clone;FireFox才能正确渲染它。

编辑:如果你在IE11中遇到盒子阴影的问题，试着添加一个轮廓:1px纯色[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>

可以使用html5标记标签内的段落和标题标签。

<p>lorem ipsum <mark>高光文本</mark> dolor sit.</p>

试试这个:

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并不兼容所有浏览器:)只是想与原始帖子中的对齐方式保持一致。

https://jsfiddle.net/richardferaro/ssyc04o4/

<mark>标签与背景颜色帮助我。

输入:

<p>
    Effective <mark style="background-color: light-gray">Nov 1, 2022</mark> We will be lowering our price.
</p>

输出: 自2022年11月1日起，我们将降低价格。

Ref