Css 跨度分裂，如何避免？

问题是：

我希望跨度不会分成两行（就像上面示例中的第三行）。我怎么做

---

CSS:

HTML:

天哪，天哪
天哪，天哪
天哪，天哪
天哪，天哪

简单CSS：

 white-space: nowrap;

更新的JSFIDLE:

完整CSS：

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

---

您可以将css属性设置为

nowrap

，这将由于空间限制而抑制换行

使用

空白：nowrap

或

显示：内联块

（未设置

宽度）

如果您不知道：
width
不会影响内联元素，例如
当我在示例中使用此选项时，所有徽章都会从div中消失您所说的“徽章”是什么意思？对不起，我看不出有什么问题。也许不需要空白就可以了？是的，使用非常复杂的JavaScript，但是为什么？在我的示例中，它不起作用，我也做同样的事情。。。我的代码中可能有什么错误？当我使用display:inline块时，它会变得非常“胖”，请在示例中尝试
 white-space: nowrap;

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