CSS实现网页打字机效果时文本容器宽度超出预期问题求助

你的打字机动画逻辑核心是将元素宽度从0过渡到100%，但你没有限制动画元素父容器的宽度规则：

• 你设置的动画终点width: 100%默认是继承上级父容器的宽度，而你用的.container-type仅设置了inline-block，没有限制宽度，会自动继承更外层容器（比如页面根容器）的宽度，远大于内部文本的实际宽度
• 额外补充：你CSS里的typed-out选择器漏写了类选择器的前缀.，如果后续要用到这个类需要修正，不影响当前现有功能

只需要修改2处核心样式即可解决：

1. 给.container-type新增宽度贴合规则，让父容器宽度刚好匹配内部文本的实际宽度

.container-type {
  display: inline-block;
  vertical-align: top;
  width: fit-content; /* 新增这行，让父容器宽度贴合内容 */
}

2. 清除所有打字动画元素的默认margin，避免p标签自带的默认边距干扰宽度计算

.welcome-1, .I-AM, .text_main_1, .text_main_2, .text_main_3, .welcome {
  margin-top: 0;
  margin-bottom: 0;
  /* 你原有行内样式设置的margin-left不受影响 */
}

可以根据每个文本的实际字符数调整animation里steps的第一个参数，比如"I'm an aspiring developer!"实际是23个字符，就把对应steps(25, end)改成steps(23, end)，动画节奏会更贴合真实打字效果。

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