如何实现非等宽字体输入框字符按maxLength均匀分布全宽度？

Great question! When working with non-monospace fonts, there’s no single CSS property that directly splits an <input> into equal-width character blocks out of the box. Your initial letter-spacing approach falls short because non-monospace characters have varying widths—calculating based on the widest "W" leaves smaller characters (like "i" or "l") with uneven gaps, breaking the uniform block effect.

But don’t worry, we can build a reliable workaround that achieves exactly the visual you want: | H | e | l | l | o | w | o | r | l | d | with perfectly even blocks, regardless of font. Here’s how:

The Core Idea #

We’ll layer a transparent input over a grid of equal-width blocks. The input handles user typing, while the grid provides the visual dividing lines and uniform spacing. This way, every character sits centered in its own fixed-width block, no matter how wide or narrow the character itself is.

Step-by-Step Implementation #

1. HTML Structure #

We’ll use a container to wrap both the input and the grid of blocks:

<div class="input-container">
  <input type="text" maxlength="10" id="customInput">
  <div class="character-grid" id="charGrid"></div>
</div>

2. CSS Styling #

The container acts as a positioning anchor, the input is transparent and covers the grid, and the grid uses CSS Grid to create equal columns:

.input-container {
  position: relative;
  width: 100px; /* Match your desired input width */
  height: 28px; /* Match your desired input height */
}

#customInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 18px; /* Match your font size */
  font-family: "Your Non-Monospace Font", sans-serif; /* Target your font */
  text-align: center;
  color: #000; /* Ensure text is visible over the grid */
}

.character-grid {
  display: grid;
  width: 100%;
  height: 100%;
}

.character-grid .block {
  border-right: 1px solid #000; /* Vertical divider between blocks */
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-grid .block:last-child {
  border-right: none; /* Remove divider from the final block */
}

3. JavaScript Setup #

We’ll dynamically generate the grid blocks based on the input’s maxLength and set the grid columns to ensure equal width:

const input = document.getElementById('customInput');
const charGrid = document.getElementById('charGrid');
const maxLength = input.maxLength;

// Set grid to create equal-width columns matching maxLength
charGrid.style.gridTemplateColumns = `repeat(${maxLength}, 1fr)`;

// Generate individual blocks
for (let i = 0; i < maxLength; i++) {
  const block = document.createElement('div');
  block.classList.add('block');
  charGrid.appendChild(block);
}

Why This Works #

• CSS Grid’s 1fr units ensure every column (block) takes an equal share of the container’s width, regardless of character size.
• The transparent input sits on top, so users type directly into the grid structure—each character is centered in its block thanks to text-align: center on the input.
• This approach works with any non-monospace font, no complex width calculations required.

Optional Polish #

• To make cursor behavior feel more natural, you can adjust the input’s padding or use JavaScript to sync cursor position with block boundaries (though the base setup works well for most cases).
• Add hover/focus styles to the container to improve interactivity.

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