防止将自动背景大小调整为实线宽标题文本

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>