如何让CSS打字机动画实现响应式自动换行？

问题分析 #

你的代码中white-space: nowrap强制文本单行显示，且打字动画依赖width属性从0到100%的变化，这导致屏幕缩小时文本无法自然换行，仅靠缩小字号会破坏排版逻辑。要实现自适应换行的打字效果，需要调整动画逻辑并移除强制单行的限制。

解决方案 #

修改核心CSS样式，改用clip-path控制文本可见区域，同时允许文本自然换行：

修改后的CSS代码

.bg-video-wrapper h1{
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 50rem;
    /* 移除固定height，让文本自然撑开高度 */
    min-height: 3rem;
    color: var(--white-color);
    text-align: center;
}

/* typing animation - budi izvrstan*/
.typewriter h1{
    display: inline-block; /* 让元素宽度适配文本内容，光标跟随文本末尾 */
    overflow: hidden;
    border-right: 1px solid var(--yellow-color);
    padding-right: 10px;
    /* 移除white-space: nowrap，允许文本自动换行 */
    letter-spacing: 6px;
    clip-path: inset(0 100% 0 0); /* 初始隐藏全部文本 */
    animation: 
        typing 7s steps(28, end) infinite, /* steps数量匹配文本总字符数 */
        blink-cursor .75s step-end infinite;
}

@keyframes typing {
    from{
        clip-path: inset(0 100% 0 0); /* 右侧完全隐藏 */
    }
    to{
        clip-path: inset(0 0 0 0); /* 完全显示文本 */
    }
}

/* typewriter cursor effect */
@keyframes blink-cursor {
    from, to {border-color: transparent;}
    50%{border-color: var(--yellow-color);}
}

关键调整说明 #

1. 移除white-space: nowrap：让文本在容器宽度不足时自动换行，适配小屏幕。
2. 替换width动画为clip-path：clip-path可以精准控制文本的可见区域，无论文本是否换行，都能实现从左到右逐字显示的打字效果。
3. 添加display: inline-block：让标题元素宽度跟随文本内容变化，确保光标始终显示在文本末尾（而非容器右侧）。
4. 移除固定height：避免换行后文本被截断，改用min-height保持基础高度。
5. 调整steps数量：根据你的文本总字符数（示例中为28）设置steps参数，确保动画节奏与逐字显示匹配。

内容的提问来源于stack exchange，提问作者Antonela Abičić