javascript - 子div溢出时强制父div放大

Question

我有这样的结构:

.out {
  display: inline-block;
  border: 2px solid green;
}

.in {
  display: inline-block;
  max-width: 300px;
  border: 2px solid red;
}

<div class="out">
  <div class="in">
    Sample text
  </div>
</div>

当 div.in 溢出时(例如，其内容为 SampletextSampletextSampletextSampletextSampletextSampletextSampletext)，它的外观和行为如下:

.out {
  display: inline-block;
  border: 2px solid green;
}

.in {
  display: inline-block;
  max-width: 300px;
  border: 2px solid red;
  overflow: visible;
}

<div class="out">
  <div class="in">
    SampletextSampletextSampletextSampletextSampletextSampletextSampletext
  </div>
</div>

但我希望它看起来像这样:

我该怎么做？

Answer 1

看起来 div.out 正在按预期扩展。但主要问题是 div.in 中的文本溢出。

您可以使用word-wrap:break-word或overflow。

下面是一个使用自动换行的演示

.in {
  display: inline-block;
  max-width: 300px;
  border: 2px solid red;
  word-wrap: break-word;
}

JSFIDDLE