Текста переносится на следующую строку

Question

Я центрирование моего таймера, перемещая внешний контейнер, который содержит контейнер таймера и этикетку контейнер с левыми 50%, тем перемещением внутреннего контейнера, который содержит сами текстовые элементы из левый -50%.

Проблема, с которой я столкнулся, заключается в том, что, поскольку мои текстовые элементы проходят мимо размера окна, когда я перемещаю контейнер вправо, они обертываются, прежде чем переместить их обратно влево &.

Обратите внимание, что счетчик миллисекунд находится на следующей строке.

Это CSS для моего внешнего контейнера:

.timer-container { 
    position: absolute; 
    left: 50%; 
    top: 42%; 
} 

Это CSS для моего Таймеры контейнера:

.timer, .clock { 
    -webkit-user-select: none; 
    position: relative; 
    left:-50%; 
    margin-left: .7vw; 
    margin-right: .7vw; 
    margin-bottom: .4vw; 
    font-size: 6vw; 
    font-weight: 400; 
    line-height: 1; 
    cursor: default; 
} 

Это HTML, чтобы показать мой элемент иерархии: (в timer-container является внешним контейнером, timer является контейнером таймера, извините за это)

<div class="timer-container"> 
{{#if white}}<span id="white-timer-age" class="timer" >{{/if}} 
{{#if black}}<span id="black-timer-age" class="timer" >{{/if}} 
    {{#if year}}<span id='year-number'>{{year}}</span>{{/if}} 
    {{#if month}}<span id='month-number'>{{month}}</span>{{/if}} 
    {{#if day}}<span id='day-number'>{{day}}</span>{{/if}} 
    {{#if hour}}<span id='hour-number'>{{hour}}</span>{{/if}} 
    {{#if minute}}<span id='minute-number'>{{minute}}</span>{{/if}} 
    {{#if second}}<span id='second-number'>{{second}}</span>{{/if}} 
    {{#if ms}}<span number='milli-number'>{{ms}}</span>{{/if}} 
</span> 
... label container & elements here 

Как я могу хранить все на одной линии?

Answer 1

Чтобы остановить текст из упаковки вам нужно white-space: nowrap

.timer, .clock { 
    white-space: nowrap; 
}