如何通过CSS限制输入框仅显示指定数量的字符（最多3个）

要实现固定宽度input最多显示3个字符、同时支持输入14个字符的需求，你可以通过调整字体大小、CSS溢出控制结合输入长度限制来解决，具体步骤如下：

1. 核心问题分析 #

你的input宽度为80px，却使用了50px的等宽字体，单个字符宽度就达到50px，3个字符总宽度150px远超过input内容区域宽度（80px减去左右内边距后仅60px），这必然导致字符截断或部分显示。

2. 具体实现代码 #

HTML部分 #

给input添加maxlength="14"属性，限制最多输入14个字符：

<input type="text" maxlength="14">

CSS部分 #

调整字体大小适配input宽度，同时添加溢出控制：

input {
  margin-top: 30px;
  background: none;
  border: 2px solid azure;
  border-radius: 15px;
  height: 80px;
  width: 80px;
  /* 调整字体大小，让3个等宽字符刚好填满input内容区域 */
  font-size: 24px;
  font-family: monospace;
  text-align: center;
  color: azure;
  outline: none;
  transition: 0.2s;
  /* 去掉多余内边距，最大化内容区域 */
  padding: 0;
  /* 隐藏超出3个字符的内容 */
  overflow: hidden;
  white-space: nowrap;
}

3. 可选优化（保留原字体大小） #

如果必须保留50px的字体大小，可通过clip-path裁剪显示区域，仅展示中间核心部分（注：此方式会让字符显示不完整，优先推荐调整字体大小的方案）：

input {
  /* 其他样式保留 */
  font-size: 50px;
  padding-inline: 10px;
  overflow: visible;
  /* 裁剪出中间80px宽的显示区域 */
  clip-path: inset(0 50px 0 50px);
}

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