展开容器 div 并将内容设置为 nowrap

Question

我有一个 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>

Answer 1

如果我没有正确理解你的问题，使用 overflow: scroll 可能会解决你的问题。

Answer 2

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

一个<br>标签也可以打破一个nowrap

但如果这是你的意图，如果你只将你的一段文本设置为现在换行，而不是整个 div。

Answer 3

你可以设置.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>

展开容器 div 并将内容设置为 nowrap

Expand container div with content set to nowrap

javascript

html

css

nowrap