CSS实现打字机动画时文本溢出页面无法自动换行如何解决？

问题原因 #

你的代码无法实现多行效果的核心问题有两个：

• 设置了white-space: nowrap属性，强制所有文本在同一行显示，自然不会自动换行
• 原始的宽度从0到100%的动画逻辑本身就是为单行打字机效果设计的，天然不支持多行场景
• 额外提示：你写的margin属性没有加单位，浏览器无法识别，不会生效

解决方案 #

方案1：纯CSS实现（适配现代浏览器） #

不需要修改HTML代码，CSS调整如下：

h1 {
  color: black;
  font-family: palatino;
  font-size: 30px;
  line-height: 1.5;
}

.write {
  margin: 100px;
  /* 背景裁剪实现文字逐显效果 */
  background: linear-gradient(#000, #000) 0 0 / 0 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: typing 3.5s steps(60, end) forwards;
  word-break: break-all;
}

@keyframes typing {
  to {
    background-size: 100% 100%;
  }
}

该方案会自动遵循正常文本换行规则，文本到达容器边缘时自动换行，打字效果逐字符显示。

方案2：JS配合实现（兼容性最优，效果更可控） #

如果需要兼容老旧浏览器，或者需要灵活控制打字速度、暂停等效果，用JS实现更简单：
HTML保持原有代码不变，新增JS代码如下：

const writeDom = document.querySelector('.write');
const content = writeDom.textContent;
writeDom.textContent = '';
let charIndex = 0;
// 调整数字修改打字速度，单位毫秒
const typeSpeed = 60;

function typing() {
  if (charIndex < content.length) {
    writeDom.textContent += content.charAt(charIndex);
    charIndex++;
    setTimeout(typing, typeSpeed);
  }
}
// 启动打字效果
typing();

对应CSS可以简化为：

h1 {
  color: black;
  font-family: palatino;
  font-size: 30px;
}

.write {
  margin: 100px;
  word-break: break-all;
}

该方案完全不需要额外处理换行逻辑，文本会按照正常文档流规则自动换行。

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