输入框宽度随内容实时伸缩需用javascript动态设置style.width，核心是用隐藏span复制样式并读取offsetwidth，再赋值给input，同时设min-width防塌陷。
输入框宽度随内容实时伸缩，用 width: fit-content 不行
直接写 width: fit-content 对 <input> 无效——浏览器会忽略它，因为表单控件的尺寸计算逻辑和普通块元素不同。真正起效的是 width: min-content 配合 white-space: nowrap，但更可靠、兼容性更好的方案是用 size 属性或 JS 监听 input 事件动态调整 style.width。
size 属性只控制字符数，不是像素宽度
size 是 HTML 原生属性，比如 <input size="10">，它表示“约等于 10 个字符宽”，实际像素取决于字体、字号、字宽。它不响应内容变化，也不能设为动态值。适合静态场景（如固定长度的验证码输入），但无法做到“输入越长、框越宽”的实时效果。
用 JavaScript 动态设置 style.width 最实用
核心思路：创建一个隐藏的 <span></span> 元素，把输入内容、字体样式完全复制过去，读取它的 offsetWidth，再赋给 input 的 style.width。这样能真实反映当前文本所需空间。
- 必须同步复制
font-family、font-size、font-weight、padding、border等影响宽度的样式 - 隐藏
<span></span>要用position: absolute; visibility: hidden; white-space: pre，不能用display: none（否则 offsetWidth 为 0） - 监听
input事件而非keyup，避免粘贴、删除、输入法组合等场景漏触发 - 加个最小宽度（如
min-width: 40px），防止空输入时框塌陷
示例关键代码：
const input = document.querySelector('input');
const span = document.createElement('span');
span.style.cssText = 'position: absolute; visibility: hidden; white-space: pre; font: inherit;';
document.body.appendChild(span);
input.addEventListener('input', () => {
span.textContent = input.value || ' ';
input.style.width = Math.max(span.offsetWidth + 10, 40) + 'px';
});
纯 CSS 方案仅适用于单行等宽字体场景
如果确定用等宽字体（如 font-family: monospace），且只支持现代浏览器，可用 ch 单位配合 min-width 和 max-width 模拟：
input {
font-family: monospace;
width: max-content;
min-width: 5ch;
max-width: 80ch;
}
但 max-content 在 input 上仍存在兼容性问题（Safari 旧版本不支持），且非等宽字体下会严重不准。实际项目中，JS 方案容错更强、行为可控。
最易被忽略的是样式同步——漏掉 font-size 或 letter-spacing，宽度就会偏小；还有没处理空字符串导致宽度归零，得手动兜底一个最小值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
