html - 如果发生自动换行，如何调整 div 的宽度？

Question

发生自动换行时是否可以调整 div 元素的大小？出于演示目的，让我使用 fiddle从一个类似的问题:

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

CSS:

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

如果您将窗口变小以进行自动换行，您将看到右侧有一个蓝色的空白区域。当出现自动换行时，我希望蓝色减少，直到到达第一行的最后一个字母。

(在这里我强制换行，我希望蓝色缩小)
这可能吗？

Answer 1

默认 div 元素是 block-level elements意味着它们占据其父元素宽度的 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 caused by word-wrap in shrunk to fit element?