Whitespace Nowrap css for Children for parent

Question

内部に複数のスパンがあるDIVがあります。スパンには、複数の行に分割できないテキストが含まれているため、Whitespace：Nowrapを設定しました。これにより、各子供のスパン内でのラッピングが正しく停止しますが、すべてのスパンがページから伸びる単一のラインにあるように、親Divが子供を包むのを止めます。

この動作を変更するには、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属性が必要です。）

Answer 3

をセットする span 持っている要素 display:inline-block.