折叠自动换行的<h1>标签的宽度

Question

所以我有两张描述问题的图片。他们在下面。

唯一相关的CSS是：

h1 {
    display: inline-block;
    background-color: pink;
}

在示例一中，标题（<h1>标签）足够短，没有包裹。从背景颜色可以看出，标签的宽度仅与其包含的字母一样宽。这就是我想要的所有标题。

这里，文字有自动换行，标签的宽度不文本的宽度，它是容器的100％。 （我知道文本本身几乎容器的宽度，但不完全 - 有一点空间）

所以，我正在寻找对正在发生的事情的解释。被包装的文本总是有效地拥有width: 100%;吗？有没有解决这个限制的方法？

这是一个展示同样事物的fiddle。

谢谢！

Answer 1

您可以将css更改为：

h1 {
    display: inline;
    background-color: pink;
}

JSFiddle here

现在看起来像：

修改：由于您对display:inline想法不太热衷，可以将文本包装在span元素中，并将背景颜色放在该元素上代替。

例如：

h1 {
  display: inline-block;
}

span {
  background-color: red;
}

<div class="container">
  <h1><span>Mine eyes have seen the glory of the coming of the lord</span>
  </h1>
  <h1><span>frog</span></h1>
</div>

Your Updated JSFiddle here