本文详解如何修复 css 打字机动画中光标（caret）超出文本末尾的常见问题，通过合理设置容器宽度与元素布局，确保光标严格停驻在最后一个字符右侧。
在使用纯 CSS 实现打字机效果时，一个高频问题是：光标（即 border-right 模拟的竖线）在动画结束时并未准确停在文本末尾，而是继续延伸至父容器（如 <h1>）的 100% 宽度位置——这通常是因为 <h1> 默认为块级元素，其自然宽度撑满父容器（如 .title），而 animation: typing 中的 width: 100% 是相对于该块级元素自身宽度计算的，而非文本实际宽度。
根本原因在于：你对 <h1> 应用了 width: 100% 动画，但未限制其容器 .title 的宽度范围，导致 <h1> 在动画结束时“拉伸”到其默认最大宽度（例如浏览器视口宽度），而光标随之移动过远。
✅ 正确解法：让动画作用于“刚好包裹文字”的容器上
关键思路是——不要让 <h1> 自己承担宽度动画，而是将其置于一个宽度自适应（fit-content）的容器中，并让动画作用于该紧凑容器内的文本行内表现。由于 <h1> 是块级元素，需配合 display: inline-block 或更推荐的方式：将宽度控制逻辑上移至父容器 .title，并设为 width: fit-content，同时移除 <h1> 上可能干扰布局的 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; }
}<div class="title"> <h1>Hi, I'm ConnerDE</h1> </div>
? 为什么 fit-content 有效？
width: fit-content 使 .title 的宽度精确等于其子元素（即 <h1>）的内容宽度（含 letter-spacing 和字体度量），因此 <h1> 的 width: 100% 动画终点就自然落在文本末尾，光标不再越界。
⚠️ 注意事项：
- 避免在 <h1> 上使用 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 外层有明确宽度上下文（如 <body> 或带 max-width 的 wrapper），并保留其 margin: 0 auto 即可——无需额外操作。
至此，光标将精准停驻于最后一个字符右侧，打字机效果干净、专业、符合直觉。
