Предотвратить перемещение динамического текста [закрыто] ⇐ Html

[Anonymous]

Я делаю небольшой проект обратного отсчета. < /p>


{years} {years === 1 ? 'year, ' : 'years, '}
{months} {months === 1 ? 'month, ' : 'months, '}
{days} {days === 1 ? 'day' : 'days'}

{padNum(hours)} {hours === 1 ? 'hour : ' : 'hours : '}
{padNum(minutes)} {minutes === 1 ? 'minute : ' : 'minutes : '}
{padNum(seconds)} {seconds === 1 ? 'second' : 'seconds'}

< /code>
Как вы можете видеть, посмотрев на обратный отсчет, текст немного движется при изменении чисел из -за разницы в ширине символов. Я хочу, чтобы числа были исправлены на месте, чтобы они ничего не перемещали. Работа. Или, может быть, есть и другие подходы, чтобы справиться с этим?
{years} {years === 1 ? 'year, ' : 'years, '}
{months} {months === 1 ? 'month, ' : 'months, '}
{days} {days === 1 ? 'day' : 'days'}

{padNum(hours)} {hours === 1 ? 'hour : ' : 'hours : '}
{padNum(minutes)} {minutes === 1 ? 'minute : ' : 'minutes : '}
{padNum(seconds)} {seconds === 1 ? 'second' : 'seconds'}



< /code>
timespacefixcss: const timespacefixcss = about page? Styles ['Time-Space-fix-aboutpage']: styles ['Space-fix']
.time-space-fix, .time-space-fix-aboutpage {
display: inline-block;
text-align: center;
font-family: inherit;
font-size: inherit;
}

.time-space-fix {
width: 3.6rem;
}

@media (max-width: 1535px) {
.clock-container {
font-size: 2.5rem;
}

.time-space-fix {
width: 3rem;
}
}


Подробнее здесь: https://stackoverflow.com/questions/763 ... ing-layout