css - 親ではなく子の空白のnowrap css

Question

内部に複数のスパンを持つ div があります。スパンには複数の行に分割できないテキストが含まれているため、空白を設定しました: nowrap. これにより、各子スパン内での折り返しが正しく停止しますが、親 div が子をラップするのも停止するため、すべてのスパンがページからはみ出す 1 行になります。

nowrap が各スパンのコンテンツにのみ適用されるように、この動作を変更するにはどうすればよいですか?

Answer 1

オプション1

<style>
   .nowrap { white-space: nowrap; }
</style>

<div>
   <span class="nowrap">span 1</span>
   <span class="nowrap">span 2</span>
   <span class="nowrap">span 3</span>
   <span class="nowrap">span 4</span>
   <span class="nowrap">span 5</span>
</div>

オプション 2

<style>
   .myDiv span{ white-space: nowrap; }
</style>

<div class="myDiv">
   <span>span 1</span>
   <span>span 2</span>
   <span>span 3</span>
   <span>span 4</span>
   <span>span 5</span>
</div>

Answer 2

div#id-of-parent span {
    whitespace: nowrap;
}

これでうまくいくはずです。(div には id 属性が必要です。)