如何实现可收缩（自适应包裹内容）的CSS输入框？

首先，普通的<input>是单行输入控件，无法实现自动换行，你需要改用<textarea>来支持多行输入。下面是具体的CSS配置方案，同时解决width: auto无效的问题：

核心CSS配置要点 #

• 自动换行：<textarea>默认支持自动换行，可通过white-space: pre-wrap保留输入的换行符并自动换行，或word-wrap: break-word强制长单词换行；也可在HTML标签上添加wrap="soft"属性增强换行逻辑。
• 宽度自适应内容：默认块级元素的width: auto会撑满父容器宽度，需将元素设置为行内块级元素，再配合width: fit-content让宽度收缩至内容尺寸，同时可设置min-width避免内容为空时控件过窄。
• 高度自适应内容：纯CSS可用height: fit-content实现初始高度适配，但要实时跟随输入内容变化高度，需要结合少量JavaScript（CSS无法监听输入内容的动态变化）。

完整代码示例 #

HTML #

<textarea class="auto-fit-input" placeholder="输入内容试试..."></textarea>

CSS #

.auto-fit-input {
  /* 改为行内块级，让宽度自适应内容 */
  display: inline-block;
  width: fit-content;
  /* 最小宽度限制 */
  min-width: 120px;
  /* 自动换行配置 */
  white-space: pre-wrap;
  word-wrap: break-word;
  /* 去掉默认的拖拽调整大小 */
  resize: none;
  /* 初始高度适配内容 */
  height: fit-content;
  /* 可选：美化样式 */
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

实时自适应高度的JS补充（可选） #

如果需要输入时高度自动跟随内容变化，添加以下代码：

const textarea = document.querySelector('.auto-fit-input');
// 监听输入事件调整高度
textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = `${textarea.scrollHeight}px`;
});
// 初始化时设置高度
textarea.style.height = `${textarea.scrollHeight}px`;

为什么width: auto无效？ #

块级元素（比如默认状态的<textarea>）的width: auto会默认占据父容器的可用宽度，而非收缩到自身内容宽度。将元素设置为display: inline-block或inline-flex后，width: auto才会根据内容宽度计算，搭配width: fit-content可更精准实现宽度自适应。

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