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

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单位（不是像素），以便它可以运行用户运行的任何文本放大。

Answer 2

这实际上只对较大的块有帮助，但您可以将div设置为display：inline-block;

＆＃13;

＆＃13;

div {
  display: inline-block;
  max-width: 2000px;
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;