html - 防止自动背景大小调整为全线宽标题文本

Question

我正在尝试在我的 <h1> 上使用 CSS 实现以下目标元素(因为它显然不是浏览器的默认行为):

但是，我似乎无法阻止我的浏览器将其呈现如下:

有人知道如何正确地实现这一目标吗？

当前代码:

.title {
  width: 300px;
  float: left;
  line-height: 68px;
  display: inline-block;
}

.title h1 {
  font-size: 42px;
  line-height: 58px;
  color: #FFF;
  background: #000;
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: bottom;
}

<div class="title">
  <h1>This is a title on two lines</h1>
</div>

Answer 1

display: inline 而不是 inline-block

.title {
  width: 300px;
  float: left;
  line-height: 68px;
  display: inline-block;
}

.title h1 {
  font-size: 42px;
  line-height: 58px;
  color: #FFF;
  background: #000;
  white-space: normal;
  word-wrap: break-word;
  display: inline;
  vertical-align: bottom;
}

<div class="title">
  <h1>This is a title on two lines</h1>
</div>