CODEWITHSUNDEEP
htmlcss
A O
A O

Reputation: 5698

Text wraps to next line

enter image description here

I am centering my timer by moving an outer container which holds the timer container and the label container from the left 50%, then moving an inner container which contains text elements themselves from the left -50%.

The problem I'm then facing, is that because my text elements go past the size of the window when I move the container to the right, they wrap around before I move them back to the left & center.

Note the millisecond counter is on the next line.

This is the css for my outer container:

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

This is the css for my timers container:

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

This is the html to show my element hierarchy: (the timer-container is the outer container, the timer is the timer container, sorry about that)

<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

How can I keep everything on one line?

Upvotes: 1

Views: 125

Answers (1)

user4639281
user4639281

Reputation:

To stop the text from wrapping you need white-space: nowrap

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

Upvotes: 3

Related Questions