如何防止多行文本填充父元素的整个宽度

Question

假设我有一个具有设定宽度的容器元素。我有一个带有显示内联块的内容元素，可以包含一些文本。该文本可能太大，以至于必须填写好几行。这样做的问题是，多行文本的默认行为是将元素增长到父元素的完整宽度。

想象一下下面的例子：

HTML：

<div class="container">
  <div class="content">
    Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
  </div>
</div>

CSS：

.container {
  width: 260px;
  border: solid blue 1px;
}
.content {
  display: inline-block;
  background: red;
}

由于这些单词很长，因此它们将放置在多行上。我对该元素的期望.content是，它会增长到单行上最大单词的最大宽度。但正如您所看到的，因为它由多行组成，所以元素增长到最大宽度.container。

我想要实现的是，.content获得单行上最大项目的宽度，就像使用一个单行一样：

有什么方法可以用纯 css/html 来实现这一点吗？

Answer 1

简单的答案是：不，你不能用纯 CSS 做到这一点。

但无论如何，这里有一个解决方案，这有点黑客：它用于display: table-cell;元素.content和一个相当小的width值（它将调整为最长单词的实际值，并且min-width在本例中充当设置）：

.container {
  width: 260px;
  border: solid blue 1px;
}
.content {
  display: table-cell;
  width: 100px;
  background: red;
}

<div class="container">
  <div class="content">
    Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
  </div>
</div>