CSS：自动调整宽度以换行文本内容？

Question

如何将元素的宽度调整为仅与其内容一样宽，包括当一行文本由于固定的外部包装宽度而换行时。

请注意，在此FIDDLE中，每个 div 上的黄色背景都与其文本内容紧密贴合，但文本换行的除外，在这种情况下，该 div 的宽度会延伸到外包装的宽度。

解决办法是什么？

<div class="wrapper">
  <div class="text">apple</div>
  <div class="text">banana peels shouldn't be green</div>
  <div class="text">kiwi</div>
  <div class="text">orange</div>
</div>

Answer 1

这是相当混乱的，但我认为它会做你想做的事：

.wrapper {
  clear: both;
  overflow: hidden;
  width: 115px;
}

.text {
    background: yellow;
    display: inline;
    margin-bottom: 3px;
}

.text:after { content: ' '; display: block; }

<div class="wrapper">
  <div class="text">apple</div>
  <div class="text">banana peels shouldn't be green</div>
  <div class="text">kiwi</div>
  <div class="text">orange</div>
</div>