单个字符宽度如何计算？怎样让模拟cmd的复古光标与文字同步移动

核心问题原因 #

• 未使用等宽字体，不同字符像素宽度不统一，无法通过字符长度直接计算偏移量
• 光标位移使用百分比、自定义系数（1.5ch）计算，没有考虑前置>符号的宽度，误差会随字符数累加
• 相对定位的基准依赖父容器宽度，窗口缩放时会额外产生偏移

修复方案 #

1. 强制使用等宽字体

给命令行容器加等宽字体配置，保证每个字符宽度一致，CSS中的1ch单位刚好等于1个英文字符的宽度：

.cmdBoxy {
  position: relative;
  top: 1rem;
  background-color: #000; /* 改黑色更贴合cmd复古风格，可根据需求调整 */
  color: #fff;
  height: 1.5rem;
  width: 99%;
  font-family: Consolas, Monaco, monospace; /* 优先加载系统内置等宽字体 */
  font-size: 1em;
  line-height: 1.5rem; /* 保证文字垂直对齐 */
}

2. 简化光标逻辑（无需手动计算宽度）

直接把光标元素放到展示文本的span后面，利用行内元素自然跟随的特性，完全避免手动计算偏移产生的误差：

<div class="cmdBoxy" >
  &gt;
  <span class="copy" ></span>
  <span class="vintage blink">_</span> <!-- 直接用下划线字符当光标，比背景绘制的还原度更高 -->
</div>

3. 调整光标样式，去掉冗余定位代码

.vintage {
  display: inline-block;
  margin-left: 1px;
}
/* 补充光标闪烁动画 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.blink {
  animation: blink 1s step-end infinite;
}

4. 简化JS逻辑，删除偏移计算相关代码

function copy(val){
  $(".copy").text(val); // 用text而非html，避免输入内容带标签被解析的安全问题
}
function enterCmd(e){
  if(event.keyCode == 13){
    $('.cmdBox').val("");
    copy($('.cmdBox').val());
  }
}

可选优化 #

如果想要更贴近真实cmd的交互体验，可以给原生输入框加隐藏样式，点击命令行区域即可直接触发输入：

.cmdBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
}

如果一定要保留手动计算宽度的逻辑，需要在保证等宽字体生效的前提下，加上前置>符号的1ch宽度，位移值改为(val.length + 1) * 1ch即可，不要使用自定义的1.5系数。

内容的提问来源于stack exchange，提问作者User not found