如何用 JavaScript 实现支持自动换行的逐字打字动画-html教程-PHP中文网

本文介绍一种绕过 CSS width 动画局限性的可靠方案：改用 JavaScript 逐字符插入文本，天然支持换行、响应式布局与多行连续打字效果。

本文介绍一种绕过 css `width` 动画局限性的可靠方案：改用 javascript 逐字符插入文本，天然支持换行、响应式布局与多行连续打字效果。

CSS 原生的“打字机动画”（typing animation）常依赖 width: 0 → 100% 配合 white-space: pre 或 steps() 关键帧实现，但其本质是单行内宽度伸缩，无法感知内容换行——一旦文本超出容器宽度，就会横向溢出或被截断，无法实现“写完第一行，自然跳到第二行继续输入”的视觉效果。

根本原因在于：width 动画控制的是元素盒模型的水平尺寸，而非文本渲染流；而换行由 white-space、word-break、容器宽度及字体度量共同决定，二者逻辑解耦，纯 CSS 无法让 width 动画“感知”软换行位置。

✅ 推荐解法：JavaScript 逐字符注入 + DOM 自然排版
该方案放弃对 width 的强制控制，转而利用浏览器默认的文本流布局能力——只要容器具备合理宽高与换行属性（如 white-space: normal），新插入的字符会自动参与换行计算，实现真正流畅的多行打字效果。

以下是精简可靠的实现代码：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载



  <link href="https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise" rel="stylesheet" type="text/css"><style>
    .container {
      font-family: 'Waiting for the Sunrise', cursive;
      font-size: 30px;
      margin: 10px 50px;
      letter-spacing: 6px;
      font-weight: bold;
      /* 关键：允许换行 */
      width: 80vw; /* 设定合理最大宽度，触发自动换行 */
      line-height: 1.4;
    }
    .typed {
      white-space: normal; /* 必须！启用自然换行 */
      overflow-wrap: break-word;
      word-break: break-word;
    }
  </style><div class="container">
    <p class="typed" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum">
    </p>
  </div>

  <script>
    const textEl = document.querySelector('.typed');
    const fullText = textEl.dataset.text;
    const delay = 80; // 每字符间隔毫秒数（可调速）

    // 逐字符追加，保留原始空格与换行符（\n 会被浏览器解析为换行）
    for (let i = 0; i < fullText.length; i++) {
      setTimeout(() => {
        textEl.textContent = fullText.slice(0, i + 1);
      }, i * delay);
    }
  </script>

? 关键要点说明：