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

这很蹩脚，但我认为它会做你想做的事情：

＆＃13;

.wrapper {
  clear: both;
  overflow: hidden;
  width: 115px;
}

.text {
    background: yellow;
    display: inline;
    margin-bottom: 3px;
}

.text:after { content: ' '; display: block; }

＆＃13;

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

＆＃13;

Answer 2

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

诉诸text-align: justify。在这种情况下，它将删除右侧的空间。
使用JavaScript在div s中包装所有span个字词，然后计算left的X坐标（width相对于父级+ span}）具有最大的X坐标。然后根据这个最大的X坐标，您应该设置目标区块的padding-right或width或margin-right。

CSS：自动调整宽度以包装文本内容？

2 个答案: