解决倒计时动态数字导致页面布局偏移问题

问题背景 #

我正在开发一个小型倒计时项目，初始代码如下：

<div className={aboutPage ? styles['clock-container-aboutpage'] : styles['clock-container']}>
    <p className={styles['clock-container__p']}>
        <span>{years}</span> {years === 1 ? 'year, ' : 'years, '}
        <span>{months}</span> {months === 1 ? 'month, ' : 'months, '}
        <span>{days}</span> {days === 1 ? 'day' : 'days'}
    </p>
    <p className={styles['clock-container__p']}>
        <span className={timeSpaceFixCSS}>{padNum(hours)}</span>  {hours === 1 ? 'hour : ' : 'hours : '}
        <span className={timeSpaceFixCSS}>{padNum(minutes)}</span>  {minutes === 1 ? 'minute : ' : 'minutes : '}
        <span className={timeSpaceFixCSS}>{padNum(seconds)}</span> {seconds === 1 ? 'second' : 'seconds'}
    </p>
</div>

运行时发现，数字变化时因字符宽度差异会导致文本轻微移位，需要让数字固定位置不影响整体布局。

尝试过的方案 #

• 使用等宽字体：能解决移位问题，但更换字体后效果失效
• 固定宽度span包裹数字：网站为自适应布局，小屏字体缩小后固定宽度不再适配

最终解决方案 #

通过添加timeSpaceFixCSS类实现数字位置固定，修改后的HTML代码：

<div className={aboutPage ? styles['clock-container-aboutpage'] : styles['clock-container']}>
    <p className={styles['clock-container__p']}>
        <span className={timeSpaceFixCSS}>{years}</span> {years === 1 ? 'year, ' : 'years, '}
        <span className={timeSpaceFixCSS}>{months}</span> {months === 1 ? 'month, ' : 'months, '}
        <span className={timeSpaceFixCSS}>{days}</span> {days === 1 ? 'day' : 'days'}
    </p>
    <p className={styles['clock-container__p']}>
        <span className={timeSpaceFixCSS}>{padNum(hours)}</span>  {hours === 1 ? 'hour : ' : 'hours : '}
        <span className={timeSpaceFixCSS}>{padNum(minutes)}</span>  {minutes === 1 ? 'minute : ' : 'minutes : '}
        <span className={timeSpaceFixCSS}>{padNum(seconds)}</span> {seconds === 1 ? 'second' : 'seconds'}
    </p>
</div>

timeSpaceFixCSS的逻辑定义：

const timeSpaceFixCSS = aboutPage ? styles['time-space-fix-aboutpage'] : styles['time-space-fix']

对应的CSS样式：

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

内容的提问来源于stack exchange，提问作者magrega