跨度分裂，如何避免这种情况？

Question

这里是问题：http://jsfiddle.net/STG22/3/

我希望跨度不会分裂成两个不同的行（就像上面的例子中的第三个）。我该怎么做？

---

CSS：

span 
{ 
    background: red; 
    border-radius: 5px; 
    width: 60px; 
} 

HTML：

<div style="width: 250px"> 
    <span>omg omg omg</span> 
    <span>omg omg omg</span> 
    <span>omg omg omg</span> 
    <span>omg omg omg</span> 
</div> 

Answer 1

简单的CSS：

white-space: nowrap; 

更新的jsfiddle：http://jsfiddle.net/STG22/5/

完全CSS：

span 
{ 
    background: red; 
    border-radius: 5px; 
    width: 60px; 
    white-space:nowrap; 
} 

Answer 2

您可以将CSS属性设置white-space到nowrap，这将抑制换行由于空间限制

Answer 3

使用white-space:nowrap或display:inline-block（不width集）。

如果您不知道：width不会影响内联元素，如<span>。