如何调整 div 的宽度以适应自动换行？

Question

div当自动换行时是否可以调整元素的大小？出于演示目的，请查看类似问题中的示例：

.mypost {
  border: 1px solid Peru;
  margin: auto;
  min-width: 200px;
  display: inline-block;
  background: red;
}

.test {
  margin: 10px;
  background: cyan;
}

<div class="mypost">
  <div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>

如果将窗口缩小以便进行自动换行，您将看到文本右侧有一个蓝色的空白区域。相反，我希望蓝色区域减少，直到到达第一行的最后一个字母。

（在这张图片中，我强制自动换行。我希望蓝色区域缩小。）

这可能吗？

Answer 1

默认情况下div元素是块级元素，这意味着它们占据其父元素宽度的 100%。正如另一个答案所示，您可以使用 javascript 根据内容设置 div 的宽度。

但是，如果您只关心将背景颜色限制在内联内容（即文本和图像）的边界内，则可以使元素与声明内联display: inline。您必须删除边距，然后向父元素添加填充。

这是我通过修改您的代码创建的示例。我添加display: inline到.test、删除margin: 10并.test添加padding: 10到.mypost。我还必须尝试line-height并font-size确保线条之间没有间隙。

.mypost {
    border: 1px solid Peru;
    margin: auto;
    min-width: 200px;
    width:300px;
    display: inline-block;

    background: red;
    font-size:18px;
    line-height:20px;
    
    padding:10px;
    
}
.test {
    background: cyan;
    display:inline;
}

<div class="mypost">
    <div class="test" contenteditable="true">
        EDIT ME..... Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div>
</div>

该片段是一个交互式演示。您可以直接编辑 div 的内容来查看自动换行的行为。

我还发现了这个重复的问题，但没有任何令人满意的答案：How to remove extra space因收缩以适合元素中的自动换行引起的？