css - 文本换行后避免在容器中分配不必要的宽度

Question

我有一个最大宽度的 div:

HTML:

<div>
    Text containing words of protracted length
</div>

CSS:

div {
    max-width: 200px;
    border: 1px solid black;
}

当文本在 div 中换行时，div 宽度以其最大宽度呈现，即使文本没有占据整个宽度:

JSFiddle

有什么方法可以让容器在发生文本换行后只分配最少的水平空间？

Answer 1

如果你事先知道文本是什么，以及你想在哪里中断它，就这样做:

div {
    width: 10em;
    border: 1px solid black;
}

这里我用 10em 在你的前三个词后换行。您只需要进行实验即可获得用于任何特定文本的确切值。使用 em 单位(而不是像素)，这样无论用户使用何种文本放大倍数，它都能正常工作。