css - 多行 h1 容器宽度不会缩小以适应其中文本的宽度

Question

这应该解释我的意思： https ://jsfiddle.net/cucocreative/5w1nmeoq/13/

当 h1 包裹到 2 行时，容器的大小不会像预期的那样减小。正如您所看到的（在减少浏览器的宽度之后）当它换行到 2 行时，在第 1 行的最后一个单词之后有一个间隙 - 下图中用红色标记

演示该问题的代码示例：

body {
  margin: 0;
  padding: 0;
}

.tagline {
  margin: 0;
  width: fit-content;
  margin-right: 10px;
}

.blackBlock {
  background-color: #000;
  padding: 20px 40px;
  margin: 0;
}

h1 {
  color: #fff;
  background-color: pink;
}

<div class="tagline">
  <div class="blackBlock">
    <h1>Porta Ridiculus Elit Lorem</h1>
  </div>
</div>

我怎么得到它，所以它会这样做呢？

它也是如此width:min-content- 但没有减少最长单词宽度的副作用。

标签： csswidth