CSS问题：不同长度文本的居中打字动画异常排查与实现

1. 修复打字动画的水平抖动问题 #

抖动的核心原因是文本容器宽度随字符输入动态变化触发浏览器重排，或使用非等宽字体导致字符宽度不一致。以下是可落地的修复方案：

方案一：切换为等宽字体 #

非等宽字体的字符宽度差异会导致容器宽度频繁波动，直接改用等宽字体从根源消除宽度变化：

.typing-text {
  font-family: 'Consolas', 'Courier New', monospace;
}

方案二：固定容器最大宽度 #

提前计算所有待显示文本的最长长度，给容器设置固定宽度避免动态重排：

• 可以用ch单位（1ch等于当前字体下数字0的宽度），根据最长文本的字符数设置：

.typing-container {
  width: 30ch; /* 替换为你最长文本的字符数 */
  white-space: nowrap;
  overflow: hidden;
}

• 也可以通过JavaScript获取最长文本的实际宽度后设置容器宽度。

方案三：GPU加速减少重排 #

添加CSS属性触发GPU加速，避免浏览器频繁重排：

.typing-text {
  transform: translateZ(0);
  will-change: contents;
}

2. 实现居中对齐的打字扩展效果 #

要实现类似编辑器的“文本随输入向两侧等量扩展”效果，核心是让文本容器始终居中且宽度自适应，而非固定起始位置：

核心实现逻辑 #

• 父容器设置text-align: center，确保文本容器始终居中
• 文本容器设为inline-block，宽度随内容自动调整
• 通过JavaScript逐个添加字符，容器宽度变化时，父容器自动维持居中，视觉上呈现文本向两侧扩展的效果

完整代码示例 #

HTML：

<div class="typing-wrapper">
  <span class="typing-text"></span>
  <span class="cursor">|</span>
</div>

CSS：

.typing-wrapper {
  text-align: center;
  font-family: 'Consolas', monospace;
  font-size: 1.5rem;
}

.typing-text {
  display: inline-block;
  white-space: nowrap;
}

.cursor {
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

JavaScript：

const texts = ['前端开发工程师', 'UI/UX 设计师', '欢迎访问我的作品集'];
const typingEl = document.querySelector('.typing-text');
let textIdx = 0;
let charIdx = 0;

function type() {
  if (charIdx < texts[textIdx].length) {
    typingEl.textContent += texts[textIdx].charAt(charIdx);
    charIdx++;
    setTimeout(type, 180);
  } else {
    setTimeout(erase, 1500);
  }
}

function erase() {
  if (charIdx > 0) {
    typingEl.textContent = texts[textIdx].substring(0, charIdx - 1);
    charIdx--;
    setTimeout(erase, 120);
  } else {
    textIdx = (textIdx + 1) % texts.length;
    setTimeout(type, 800);
  }
}

// 启动动画
type();

效果说明 #

• 每个文本字符串会自动在父容器中居中，长度变化时，整个文本块的位置自动调整，保持居中状态
• 光标始终跟随文本末尾，视觉上呈现“起始端左移、光标右移”的等量扩展效果，完全匹配编辑器的居中输入逻辑

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