如何让打字效果动画摆脱固定宽度限制适配所有页面标题？

我想把一个心仪的打字效果动画应用到所有页面标题上，但当前效果依赖固定宽度值实现——首页标语场景没问题，但修改标题内容时必须同步调整所有宽度值。能不能不依赖固定宽度，实现一样的打字效果？

目前首页用这个效果展示标语，其他页面标题都是单行文本，比如About、Contact、Support、News这类。

原代码 #

HTML #

<div id="head">
    <div class="wrap">
        <div>
            <p>We Create</p>
            <p>Software for</p>
            <p>People!!</p>
        </div>
    </div>
</div>

CSS #

#head {
    background: #000;
    height: 700px;
    overflow: hidden;
    position: relative;
}

#head .wrap {
    height: 100%;
    margin: 0 auto;
    max-width: 850px;
    position: relative;
    width: 100%;
}

#head .wrap div {
    align-items: center;
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;
    height: 100%;
    position: relative;
    width: 100%;
}

#head .wrap div p {
    border-right: 5px solid #b5cfd7;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 85px;
    font-weight: 900;
    margin-left: 10px;
    overflow: hidden;
    text-transform: uppercase;
    white-space: nowrap;
}

#head .wrap div p:nth-child(1) {
    animation: type 2s steps(20, end) 0s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    width: 575px;
}

#head .wrap div p:nth-child(2) {
    animation: type2 2s steps(20, end) 2s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    opacity: 0;
    width: 775px;
}

#head .wrap div p:nth-child(3) {
    animation: type3 2s steps(20, end) 4s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    opacity: 0;
    width: 475px;
}

/* Animation */
@keyframes type {
    0% {
        width: 0;
    }
    99.9% {
        border-right: 5px solid #b5cfd7;
    }
    100% {
        border: none;
    }
}

/* Animation */
@keyframes type2 {
    0% {
        width: 0;
    }
    1% {
        opacity: 1;
    }
    99.9% {
        border-right: 5px solid #b5cfd7;
    }
    100% {
        border: none;
        opacity: 1;
    }
}

/* Animation */
@keyframes type3 {
    0% {
        width: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Animation */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

解决方案 #

核心思路是用max-content自动适配文本宽度，配合CSS自定义属性控制打字动画的步数，彻底摆脱固定像素宽度的依赖。

修改后的CSS #

#head {
    background: #000;
    height: 700px;
    overflow: hidden;
    position: relative;
}

#head .wrap {
    height: 100%;
    margin: 0 auto;
    max-width: 850px;
    position: relative;
    width: 100%;
}

#head .wrap div {
    align-items: center;
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;
    height: 100%;
    position: relative;
    width: 100%;
}

#head .wrap div p {
    border-right: 5px solid #b5cfd7;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 85px;
    font-weight: 900;
    margin-left: 10px;
    overflow: hidden;
    text-transform: uppercase;
    white-space: nowrap;
    width: max-content; /* 自动适配文本宽度 */
}

/* 为每个标题设置字符数，修改文本时只需更新这个值 */
#head .wrap div p:nth-child(1) {
    --char-count: 9;
    animation: type 2s steps(var(--char-count), end) 0s 1 normal forwards, blink .5s step-end 4s infinite alternate;
}

#head .wrap div p:nth-child(2) {
    --char-count: 11;
    animation: type 2s steps(var(--char-count), end) 2s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    opacity: 0;
}

#head .wrap div p:nth-child(3) {
    --char-count: 8;
    animation: type 2s steps(var(--char-count), end) 4s 1 normal forwards, blink .5s step-end 4s infinite alternate;
    opacity: 0;
}

/* 统一动画逻辑，减少冗余 */
@keyframes type {
    0% {
        width: 0;
        opacity: 0;
    }
    1% {
        opacity: 1;
        border-right: 5px solid #b5cfd7;
    }
    99.9% {
        border-right: 5px solid #b5cfd7;
    }
    100% {
        width: max-content;
        opacity: 1;
        border: none;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

关键改进点 #

1. 替换固定宽度为max-content：让元素宽度自动匹配文本内容，无需手动计算像素值，修改文本后宽度自动更新。
2. 用CSS自定义属性控制打字步数：通过--char-count定义每个标题的字符总数（包含空格、标点），动画的steps()参数直接引用这个值，保证打字效果的精准性。
3. 合并冗余动画：将原来的3个@keyframes合并为一个，统一处理宽度、透明度和光标效果，代码更易维护。
4. 复用性提升：其他页面的单行标题只需复用这套逻辑，添加对应的--char-count和动画即可，比如：

.page-title {
    --char-count: 5; /* 对应"About"的字符数 */
    animation: type 2s steps(var(--char-count), end) 0s 1 normal forwards, blink .5s step-end 2s infinite alternate;
    width: max-content;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    /* 其他样式按需调整 */
}

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