如何在HTML textarea的指定列位置绘制垂直参考线

要实现指定字符位置的垂直参考线效果，用CSS就能搞定，不需要复杂的JS逻辑，也不会影响textarea的原生输入功能，完全满足既要提示行宽、又允许用户输入超长行的需求。

实现核心思路 #

利用CSS背景渐变绘制竖线，搭配等宽字体和ch单位实现精准的字符位置定位：

• 必须给textarea设置等宽字体，保证每个字符的宽度一致，才能准确匹配字符数对应的位置
• ch是CSS原生单位，1ch刚好等于等宽字体中数字0的宽度，直接用字符数换算位置不需要手动算像素
• 背景设置为跟随输入内容固定，滚动时参考线不会偏移

完整代码示例 #

HTML 基础结构 #

<textarea id="input" rows="10" cols="100"></textarea>

CSS 样式实现 #

#input {
  /* 强制等宽字体，保证字符宽度统一 */
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  /* 绘制80字符位置的灰色参考线 */
  background: linear-gradient(
    to right,
    transparent 0,
    transparent calc(80ch - 1px),
    #e2e8f0 calc(80ch - 1px),
    #e2e8f0 80ch,
    transparent 80ch
  );
  /* 背景随内容固定，滚动时参考线位置不变 */
  background-attachment: local;
  background-repeat: no-repeat;
  /* 常规样式调整，可按需修改 */
  padding: 10px;
  border: 1px solid #cbd5e1;
  line-height: 1.5;
}

自定义调整方法 #

• 要修改参考线位置：把样式里的80ch改成你需要的字符数即可，比如要在第100字符位置加线就改成100ch
• 要修改参考线颜色：把渐变里的#e2e8f0替换成你想要的色值，比如用浅红色#fecdd3会更醒目
• 老浏览器兼容：如果遇到不支持ch单位的场景，可以先测一下当前字号下单个字符的像素宽度，比如14px等宽字体单字符宽约7px，80字符就是560px，把80ch替换成560px即可

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