0

その中に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>

4

3 に答える 3

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>

于 2016-07-18T16:09:40.470 に答える
0

テキストを折り返す必要がある場合は、内側のコンテンツが必要な場合は、最初に a を設定してみてくださいdiv(または、これを行う要素を追加します)。nowrapdisplay: block

<br>タグはまた、nowrap

しかし、これがあなたの意図である場合、div 全体ではなく、テキストの一部のみを nowrap に設定すると、問題が少なくなる可能性があります。

于 2016-07-18T15:37:02.253 に答える