Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

Answer 2

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

<br>代码也可以破解nowrap

但如果这是你的意图，如果你只将你的文本设置为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>

展开内容设置为nowrap的容器div

3 个答案: