如何让type为textarea的input标签行尾自动换行而非内容溢出

问题根因 #

你当前代码的核心错误是使用了不存在的input[type="textarea"]语法，<input>本身是单行输入控件，天生不支持多行换行，要实现多行输入自动换行需要使用独立的<textarea>标签。 #

调整步骤 #

1. 修正HTML代码
   把原来的input替换为标准textarea标签，你代码里的rows、cols属性本身就是textarea专属属性，放在input上不会生效。

<div class="post">
  <textarea placeholder="What's on your mind?" rows="4" cols="50"></textarea>
</div>

2. 调整CSS选择器及换行属性
   原来的CSS选择器是匹配input的，需要改成匹配textarea，同时可以明确添加换行规则，兼容长字符、长单词的换行场景。

.post textarea {
  outline: none;
  font-family: sans-serif;
  font-weight: 300;
  padding-top: 15px;
  padding-left: 25px;
  font-size: 25px;
  border: none;
  background-color: transparent;
  width: 100%;
  /* 自动换行配置 */
  white-space: pre-wrap;
  word-wrap: break-word;
  /* 可选：禁止用户拖拽调整输入框大小，按需添加即可 */
  resize: none;
}

补充说明 #

textarea默认就支持行尾自动换行，上面添加的white-space: pre-wrap和word-wrap: break-word是额外兼容处理，遇到连续无空格的长字符（比如长链接、长数字）时也能正常换行，不会溢出容器。

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