空白 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>

Answer 2

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

那应该可以解决问题。 （你的 div 需要 id 属性。）

Answer 3

将 span 元素设置为 display:inline-block。