html - 让容器宽度与其第一个元素一样宽，其他元素保持最大尺寸

Question

<div class="content">
    <h2>This is a long heading</h2>
    <p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod vitae!</p>
</div>

CSS

.content {
    background-color: tomato;
    color: #fafafa;
    padding: 10px;
    margin: 40px;
}

基本上我的代码是第一个例子，我希望它像第二个例子一样。与 H2 宽度相同的容器(从后端生成)。

如果 h2 有 2 个单词，那么它下面的段落应该匹配宽度，如果 h2 有 20 个单词，则应该发生同样的情况(使用极端作为指导)。

Better check fiddle here

寻找仅 css 的解决方案

Answer 1

有一种方法，但它不适用于一般布局......但是，FWIW。

我会优先使用更灵活的布局方法或 javascript。我怀疑这个选项不是稳健的。

.content {
  display: table;
  border: 1px solid grey;
  /* note does not extend to paragraph */
}
.content h2 {
  display: inline-block;
}
.content p {
  display: table-caption;
  caption-side: bottom;
  text-align: justify;
}

<div class="content">
  <h2>This is a long heading</h2>

  <p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod
    vitae!</p>

  <p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod
    vitae!</p>
</div>

JSfiddle Demo