Question

当你做类似的事情时：

.container {
  column-width: 200px;
  height: 300px;
}

<div class="container">
  ... a lot of text...
</div>

如果文本足够大，将导致相应的文本向右溢出容器宽度。如果你想要一个水平布局，这很棒，但是，div宽度不会增长，因为文本已经“溢出”了容器。如果你将背景放到div中，你会看到在屏幕结束后背景不会出现（如果文字足够大）。这就是为什么，如果你以横向方式在第二个div旁边放置第二个div，第二个div将超过第一个div的溢出内容，这是不可取的。

问题是：我怎样才能将第一个div调整到他内部的内容，无论它在水平线上有多大？

Answer 1

我可能会这样做（如果我明白你想要的话）

.container {
  width: auto;
  height: 300px;
}

.text{
Padding-left: 10%;
Padding-right: 10%;
}
<div class="container">
 <div class="text">
 ... a lot of text...
</div>
</div

容器现在应根据文本更改大小。：）

Answer 2

通过CSS3 Intrinsic Sizing,，您可以使用以下命令：width: max-content，它根据所包含的文本扩展父容器的宽度。

警告-IE不支持。检查以下内容：https://caniuse.com/#search=max-content

当文本内部溢出到右边时，CSS会增加容器宽度吗？

2 个答案: