Спан расщепляется, как этого избежать?

Question

Вот проблема: http://jsfiddle.net/STG22/3/

Я хочу, чтобы span не разбивался на две разные строки (как в третьем примере выше). Как я могу это сделать?

---

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

Используйте white-space:nowrap или display:inline-block (без установки width).

Если вы не знали: width не влияет на встроенные элементы, такие как <span>.

Answer 3

вы можете установить свойство css white-space на nowrap, это будет подавлять разрывы строк из-за ограниченного пространства