聊天UI输入框无法自动换行问题排查求助

嘿，问题出在你用的是 <input type="text"> 这个控件上——它本质是单行输入框，天生就只能显示单行文本，所以你加的 word-break: break-all 根本不会生效，因为它不支持多行渲染。

要实现类似短信输入框的自动换行效果，最直接的方案是把单行输入框换成 <textarea>，这是原生支持多行输入和自动换行的控件，再配合CSS调整样式就可以了。

具体修改步骤： #

1. 替换HTML中的输入控件

把原来的 <input> 标签换成 <textarea>，同时保留类名和占位符：

<div class="c-chat-window__compose">
  <textarea class="c-chat-window__text-box" placeholder="Write message..."></textarea>
  <button class="c-chat-window__button" type="submit">Send </button>
</div>

2. 调整CSS样式适配textarea

更新 .c-chat-window__text-box 的样式，确保它支持自动换行，同时保持和原来输入框一致的外观：

&__text-box {
  flex: 1;
  min-height: 40px; /* 保持初始高度和原来一致 */
  max-height: 120px; /* 可选：限制最大高度，超出后滚动 */
  width: 100%;
  border:0;
  border-top: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  padding: 10px; /* 调整内边距让文本更舒服 */
  resize: none; /* 可选：禁止用户拖动调整文本框大小 */
  word-break: break-all;
  white-space: pre-wrap; /* 确保自动换行和保留用户输入的换行 */
  overflow-wrap: break-word; /* 长单词自动拆分换行，避免溢出 */
}

补充说明 #

如果你坚持要用 <input type="text">（非常不推荐，体验会很差），可以尝试添加以下CSS，但输入框不会自动调整高度，用户输入多行时需要手动滚动：

&__text-box {
  white-space: pre-wrap;
  overflow: auto;
  height: auto;
  word-break: break-all;
}

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