html - 折叠一个自动换行的

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