如何让包裹换行文本的div宽度仅适配其内容？

当设置div为inline-block布局时，未换行的短文本容器能自适应文本宽度，但文本换行后，容器水平宽度会超出实际文本所占宽度。以下是问题复现代码：

.outer-container {
  width: 600px;
  height: 300px;
  background: pink;
}

.text-container-bad, .text-container-good {
  display: inline-block;
  margin-bottom: 30px;
  background: cyan;
}

<div class="outer-container">
  <div class="text-container-good">
    Shorter text that doesn't wrap and the container only takes as much space as the text
  </div>
  <div class="text-container-bad">
    This is a longer text that wraps and the container takes more horizontal space thaaaaaaaaaaaan its text
  </div>
</div>

解决方案 #

方法1：使用width: min-content #

min-content属性会让容器宽度收缩到内容的最小可行宽度，也就是以文本中最长的一行作为宽度基准，刚好适配换行后的文本范围。

修改样式：

.text-container-bad {
  display: inline-block;
  margin-bottom: 30px;
  background: cyan;
  width: min-content;
}

方法2：使用display: table #

table元素默认会根据内容自动调整到合适宽度，对于换行文本也能精准适配，替换inline-block即可：

.text-container-bad {
  display: table;
  margin-bottom: 30px;
  background: cyan;
}

方法3：使用inline-grid或inline-flex #

内联网格/弹性盒布局的特性同样支持根据内容换行后的实际宽度自适应：

.text-container-bad {
  display: inline-grid; /* 或 inline-flex */
  margin-bottom: 30px;
  background: cyan;
}

以上任意一种方法都能让包裹换行文本的容器仅占用文本实际所需的水平空间，不会出现宽度超出的问题。

内容的提问来源于stack exchange，提问作者Green Mint