Whitespace Nowrap CSS为儿童而不是父母

Question

我有一个内部有多个跨度的div。跨度包含无法在多行上拆分的文本，因此我设置了空格：nowrap。这确实会停止正确的每个孩子范围内的包裹，但也阻止父div包裹孩子，以便所有跨度都在一条线上延伸的一行。

如何更改此行为，因此现在仅适用于每个跨度的内容？

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.