空格nowrap CSS的孩子，但不是父母

Question

我有一个具有多个跨度的div。跨度包含无法分割成多行的文本，因此我设置了空白：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>