CSS打字动画段落无法在.main容器内换行的问题求助

你的代码无法实现自动换行的核心原因有两个：

1. white-space: pre 强制文本保留原始空格格式且禁止自动换行，完全忽略容器宽度限制
2. 基于width的打字动画仅适配单行场景，无法支持多行文本随宽度增长自动换行的需求

根据你的需求，提供两种实现方案：

方案1：宽度逐步增长+自动换行（容器展开式打字效果） #

这种方案让段落宽度从0逐步增长到100%，文本随着宽度增加自动换行，完美适配.main容器：

.main {
  width: 400px;
}

p.slide-out {
  padding: 1em;
  overflow: hidden;
  border-right: .15em solid orange;
  letter-spacing: .15em;
  margin: 0 auto;
  width: 0; /* 初始宽度为0，隐藏内容 */
  animation: typing 3.5s ease forwards, blink-caret .75s step-end infinite;
}

@keyframes typing {
  to {
    width: 100%; /* 动画结束后宽度铺满容器 */
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

修改说明：

• 移除white-space: pre，恢复文本自动换行特性
• 初始设置width: 0隐藏内容，通过动画将宽度过渡到100%
• 使用ease让宽度增长更平滑；若需要分段展开效果，可替换为steps(N)（N为分段数）

方案2：逐字打字+自动换行（真实打字机效果） #

如果需要逐字显示文本，打满一行后自动换行，可通过background-clip: text实现：

.main {
  width: 400px;
}

p.slide-out {
  padding: 1em;
  overflow: hidden;
  border-right: .15em solid orange;
  letter-spacing: .15em;
  line-height: 1.5; /* 优化多行文本行高 */
  color: transparent; /* 隐藏原始文字颜色 */
  background: linear-gradient(to right, #000 0%, #000 100%); /* 用背景模拟文字 */
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 0% 100%; /* 初始背景宽度为0 */
  background-repeat: no-repeat;
  /* steps参数需与文本总字符数匹配，根据实际内容调整 */
  animation: typing 6s steps(150, end) forwards, blink-caret .75s step-end infinite;
}

@keyframes typing {
  to {
    background-size: 100% 100%; /* 背景铺满文字，实现逐字显示 */
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

修改说明：

• 移除white-space: pre，让文本自动适配容器宽度换行
• 通过background-clip: text将渐变背景裁剪为文字形状，利用background-size动画实现逐字显示
• steps(150)中的数字需与文本总字符数匹配，确保每一步显示一个字符
• forwards让动画结束后保持最终状态

HTML代码无需修改，两种方案均可直接使用原结构。

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