用于孩子但不是父母的空白 nowrap css答案

【问题标题】：whitespace nowrap css for children but not parent用于孩子但不是父母的空白 nowrap css
【发布时间】：2011-04-26 00:54:12
【问题描述】：

我有一个内部有多个跨度的 div。跨度包含不能分成多行的文本，因此我设置了空格：nowrap。这确实会正确停止每个子跨度内的包装，但也会阻止父 div 包装子级，因此所有跨度都位于从页面延伸的单行上。

如何更改此行为以使 nowrap 仅适用于每个跨度的内容？

【问题讨论】：

标签： css whitespace styling nowrap

【解决方案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>

【讨论】：

我认为 OP 希望避免将类添加到每个元素。看我的回答。
或者给 div 一个 id，然后 id_of_div span{white-spave:nowrap;}
@Cfreak，我已经这么想了（因此，“选项 1”）。我添加了选项 2。
此解决方案不适用于 IE8 或 IE9。请参阅我的问题http://stackoverflow.com/questions/7877095
我正在使用选项 2，但由于某种原因，我的跨度都在一行上并且溢出了我的 div 容器。

【解决方案2】：

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

这应该可以解决问题。（您的 div 将需要 id 属性。）

【讨论】：

如果你已经有一个id，那么应该不需要标签元素。
@Prozaker - 是的，但浏览器的速度稍快

【解决方案3】：

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

【讨论】：