文本换行到下一行

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