如何仅在文本后面获得背景颜色？

Question

这是我的代码，但我希望文本背后只有背景颜色，而不是在整个屏幕上延伸？有什么想法吗？

   .section_title {
      background-color: orange;
      text-align: center;
      margin: 0px auto;
    }

HTML

<div class="col-md-12">
  <div class="section_title">
    <h2>Choose a Pack to Print</h2>
  </div>
</div>

Answer 1

一个选项是将display: inline-block;添加到文本元素的CSS中。

Answer 2

有几种方法可以做到这一点，但最好的方法是制作h2 inline或inline-block。

使用inline-block可以设置宽度/高度。

.section-title {
  text-align: center;
}
.section-title h2 {
  display: inline-block;
}

另一种方法是在h2上设置宽度并将边距设置为auto;

.section-title h2 { 
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* for example */
}

如果您希望所有标题都是设定宽度，我会选择第二个标题（允许文本换行）。如果你想让盒子灵活并拥抱内容，我会使用第一个。

Answer 3

我在display: inline-block;中发现的一个问题是它清除了浮点数错误。相反，我使用width: fit-content;

.highlight {
  background: yellow;
  padding: 0.5em;
  width: fit-content;
}

<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>