展开容器 div，内容设置为 nowrap答案

【问题标题】：Expand container div with content set to nowrap展开容器 div，内容设置为 nowrap
【发布时间】：2016-07-18 15:19:05
【问题描述】：

我有一个 div，其中包含一些内容，并设置为 white-space: nowrap; 当这种情况发生时，div 保持相同的大小。我怎样才能使div 继续换行到现在漂浮在页面右侧的内容的末尾？

.parent {
  border: 1px dotted blue;
}
.parent p {
  border: 1px dotted red;
  white-space: nowrap;
}

<div class='parent'>
  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
</div>

【问题讨论】：

标签： javascript html css nowrap

【解决方案1】：

如果你想让边框一直到内容的右边，你可以设置.parent{display:inline-block;}。

.parent {
  border: 1px dotted blue;
  display: inline-block;
}
.parent p {
  border: 1px dotted red;
  white-space: nowrap;
}

<div class='parent'>
  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
</div>

【讨论】：

【解决方案2】：

如果我正确理解您的问题，使用溢出：滚动可能会解决您的问题。

【讨论】：

【解决方案3】：

如果您的意思是在 nowrap 文本需要换行之后需要 div 中的内容，您可以尝试将 display: block 设置为后面的第一个（或添加一个元素来执行此操作）。

<br> 标签也可以破坏nowrap

但如果这是您的意图，那么如果您仅将一段文本设置为 nowrap，而不是整个 div，则可能会减少问题。

【讨论】：