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

这是非常kludgy但我认为它会做你想要的：

.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>

Answer 2

没有CSS方法可以将块的宽度调整为包装文本长度。所以你有两个选择：

1. 度假到text-align: justify。在这种情况下，它将删除右侧的空间。
2. 使用JavaScript包装divs中的所有spans单词，然后计算具有最大X坐标的left的X坐标（相对于父+外width的span）。然后根据这个最大的X坐标，您应该设置目标块的padding-right或width或margin-right。