文本换行到下一行

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;
}