使用GSAP SplitType实现文本动画时换行异常的求助

问题概述 #

在个人作品集项目中使用GSAP SplitType实现文本动画时，出现文本意外换行、显示异常的问题：VS Code中编写的是无换行的连续语句，但实时预览时HTML结构解析异常，最终页面渲染出错误的换行效果。

复现代码 #

HTML结构 #

<div class="animated-text">这是需要保持连续显示的文本动画内容</div>

CSS样式 #

.animated-text {
  font-size: 2rem;
  font-weight: 700;
}

JavaScript代码 #

import SplitType from 'split-type';
import gsap from 'gsap';

// 初始化SplitType并添加动画
const animatedText = new SplitType('.animated-text', {
  type: 'words, chars'
});

gsap.from(animatedText.chars, {
  opacity: 0,
  y: 20,
  stagger: 0.05,
  duration: 0.5
});

错误渲染表现 #

原本应连续显示的文本被拆分成多行，部分字符/单词意外换行，破坏了文本的连贯性（对应截图显示异常换行效果）。

解决方案 #

1. 禁用SplitType的行拆分功能 #

SplitType默认会按文本行拆分元素，这可能导致意外换行，通过配置split.lines: false禁用该功能：

const animatedText = new SplitType('.animated-text', {
  type: 'words, chars',
  split: {
    lines: false // 关闭自动按行拆分
  }
});

2. 给文本容器添加强制不换行CSS #

确保容器本身不会触发自动换行：

.animated-text {
  font-size: 2rem;
  font-weight: 700;
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 可选：处理容器宽度不足时的溢出 */
}

如果需要响应式场景下自动换行（而非异常拆分），可改用：

.animated-text {
  white-space: pre-wrap; /* 保留原始格式，仅在容器边界处换行 */
  word-break: keep-all; /* 避免单词被强制拆分 */
}

3. 修正SplitType生成元素的显示方式 #

检查SplitType生成的.word或.char元素，若被设置为块级显示，通过CSS强制行内/行内块显示：

.animated-text .word,
.animated-text .char {
  display: inline-block; /* 保持行内排列，同时支持动画变换 */
  white-space: nowrap;
}

4. 确保DOM加载完成后初始化 #

若DOM未完全加载就执行SplitType初始化，可能导致文本解析异常，确保在DOM就绪后执行：

document.addEventListener('DOMContentLoaded', () => {
  const animatedText = new SplitType('.animated-text', {
    type: 'words, chars',
    split: { lines: false }
  });

  gsap.from(animatedText.chars, {
    opacity: 0,
    y: 20,
    stagger: 0.05,
    duration: 0.5
  });
});

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