如何使用 CSS 设置文本宽度的背景颜色，而不是整个元素的宽度？

Question

我想要的是绿色背景刚好在文本后面，而不是页面宽度的 100%。这是我当前的代码：

 h1 {
    text-align: center;
    background-color: green;
}

 <h1>The Last Will and Testament of Eric Jones</h1>

原文由 Hithere Paperbag 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将文本放在行 内元素 中，例如 <span> 。

 <h1><span>The Last Will and Testament of Eric Jones</span></h1>

然后在内联元素上应用背景色。

 h1 {
    text-align: center;
}
h1 span {
    background-color: green;
}

内联元素与其内容一样大，所以应该为你做到这一点。

原文由 BalusC 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

选项1

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 和 这里

---

选项 2

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>

---

选项 3

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

---

选项 4

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>

---

选项 5

::before

• 需要在css文件中输入文字（不是很实用）

 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 的更多信息，请访问 w3schools 的 CSS Tricks and pseudo elements in general

---

选项 6

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>

关于

在 这篇 CSS 技巧文章 中，更多关于以 transform: translate(); 为中心（和一般居中）

---

选项 7

text-shadow: 和 box-shadow:

• 不是 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/

更多选择

通过组合上面的不同显示选项和居中方法，还有一些其他方法可以解决这个问题。

原文由 Hastig Zusammenstellen 发布，翻译遵循 CC BY-SA 4.0 许可协议