本文详解如何修复 css 打字机动画中光标（caret）超出文本末尾的常见问题，通过合理设置容器宽度与元素布局，确保光标严格停驻在最后一个字符右侧。

在使用纯 CSS 实现打字机效果时，一个高频问题是：光标（即 border-right 模拟的竖线）在动画结束时并未准确停在文本末尾，而是继续延伸至父容器（如

）的 100% 宽度位置——这通常是因为

默认为块级元素，其自然宽度撑满父容器（如 .title），而 animation: typing 中的 width: 100% 是相对于该块级元素自身宽度计算的，而非文本实际宽度。

根本原因在于：你对

应用了 width: 100% 动画，但未限制其容器 .title 的宽度范围，导致

在动画结束时“拉伸”到其默认最大宽度（例如浏览器视口宽度），而光标随之移动过远。

✅ 正确解法：让动画作用于“刚好包裹文字”的容器上

关键思路是——不要让

自己承担宽度动画，而是将其置于一个宽度自适应（fit-content）的容器中，并让动画作用于该紧凑容器内的文本行内表现

是块级元素，需配合 display: inline-block 或更推荐的方式：将宽度控制逻辑上移至父容器 .title，并设为 width: fit-content，同时移除

上可能干扰布局的 margin: 0 auto（它在块级元素上无效且易引发误解）

。

以下是优化后的标准实现：

.title {
  margin: 0 auto;
  width: fit-content; /* ✅ 关键：容器仅包裹内容，不撑满 */
}
.title h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  letter-spacing: 0.15em;
  /* 移除 margin: 0 auto —— 此处无意义，居中由 .title 控制 */
  animation: 
    typing 3.5s steps(16, end), 
    blink-caret 0.5s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; } /* ✅ 现在 100% 指 .title 的 fit-content 宽度，即文本真实宽度 */
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: orange; }
}

  
Hi, I'm ConnerDE

? 为什么 fit-content 有效？
width: fit-content 使 .title 的宽度精确等于其子元素（即

）的内容宽度（含 letter-spacing 和字体度量），因此

的 width: 100% 动画终点就自然落在文本末尾，光标不再越界。

⚠️ 注意事项：

• 避免在

  上使用 margin: 0 auto 试图居中——块级元素的水平居中需依赖父容器 text-align: center 或 display: flex，但此处用 fit-content + margin: 0 auto（作用于 .title）已足够；

• steps(16, end) 中的 16 需与文本字符数（含空格、标点）匹配才显自然。本例 “Hi, I'm ConnerDE” 共 16 个字符，恰到好处；若文本变更，请同步调整 steps(N, end) 中的 N 值；
• 如需响应式支持，fit-content 在现代浏览器中兼容良好（Chrome 65+、Firefox 63+、Safari 15.4+），旧版可降级为 display: inline-

  

  block + text-align: center 组合。

? 进阶提示： 若希望整段文字在页面中水平居中且保持打字效果，只需确保 .title 外层有明确宽度上下文（如

至此，光标将精准停驻于最后一个字符右侧，打字机效果干净、专业、符合直觉。

# 将其  # 用了  # 是因为  # 移除  # 常见问题  # safari  # 进阶  # 只需  # 作用于  # 浏览器  # app  # css  # 设为  # auto  # chrome  # 为什么  # border  # display  # animation  # firefox  # flex  # overflow  # 结束时  # margin  # 停驻 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】