input文本框内容达边界时无法自动换行，如何解决？

你用的是<input type="text">，这是单行输入框，原生特性就是只支持单行文本输入，所以不管加overflow-wrap、word-wrap还是word-break这类CSS属性，都没法实现自动换行效果。

换成<textarea>标签就能解决这个问题，修改后的代码如下：

HTML代码 #

<textarea id="userText" class="userTextBox"></textarea>

CSS代码 #

.userTextBox {
  margin-bottom: 20px;
  width: 500px;
  height: 100px;
  overflow-wrap: break-word;
  /* 可选：添加resize属性控制是否允许用户调整输入框大小 */
  resize: vertical;
}

如果非要坚持用input标签（不推荐），可以尝试添加非标准的wrap="hard"属性，但这个属性兼容性极差，大部分主流浏览器都不支持，所以优先推荐使用textarea。

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