CSS打字机效果容器过宽、光标远离文字问题求解

• h1默认是块级（block）元素，这类元素默认会占满父容器的全部可用宽度。你原来的动画把宽度从0过渡到100%，最终宽度就是父容器#h1-id的全宽，不是文字本身的宽度，所以右侧的光标边框会跑到离文字很远的父容器边缘。
• 你之前尝试的display: inline失效也很正常：行内（inline）元素不支持手动设置width/max-width属性，你写的宽度规则和动画完全不生效，元素会直接被内部文字撑开，看起来就是动画没运行、直接显示完整内容。

用inline-block（行内块）布局+max-width做动画即可，行内块元素既不会默认撑满父容器，又支持宽度属性让动画正常运行，max-width设置为大于标题最大可能长度的值，就会自动适配文字实际宽度，不会过度伸展。

只需要修改CSS代码即可，HTML结构不用动：

.typewriter {
  overflow: hidden;
  border-right: .15em solid white;
  white-space: nowrap;
  animation: typing 2s forwards;
  font-size: 1.6rem;
  /* 替换原width:0为max-width:0 */
  max-width: 0;
  /* 新增行内块布局 */
  display: inline-block;
}

@keyframes typing {
  from {
    /* 对应动画属性改为max-width */
    max-width: 0
  }
  to {
    /* 设置为大于你所有可能欢迎标题长度的值即可，1000px足够覆盖绝大多数场景 */
    max-width: 1000px;
  }
}

可选优化 #

如果想让长度估算更精准，可以把max-width终点值用ch单位设置，1ch约等于当前字体下1个英文字符的宽度，比如你预估欢迎语最长不会超过60个字符，就写成max-width: 60ch即可。

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