嘿，我来帮你理清这个问题～

首先得明确一个核心点：<input type="text">是原生设计为单行输入的元素，不管你给它套什么CSS类（比如你试的text-area），都没法让它真正支持用户输入换行——这就是你改完之后格式丢失、还不能换行的根本原因。

针对你的需求，这里有清晰的解决方案：

最推荐：直接改用<textarea> #

这是标准且最简单的方案，<textarea>就是专门为多行输入设计的，原生支持换行，还能完美适配你现有的input-group格式。只需要把原来的<input>替换成<textarea>就行，示例代码如下：

<div class="input-group">
  <label>Some input</label>
  <textarea name="var_1" rows="3"></textarea>
</div>

• rows属性可以控制默认显示的行数，你可以根据需求调整
• 如果想让它和原来的单行输入框样式一致，只需要加几行CSS（比如设置相同的width、padding、border、font属性），完全不会破坏原有格式

关于你提到的帖子思路 #

你说的那个帖子里的方法，本质是让单行输入框的文本显示时自动折行（比如用white-space: pre-wrap这类CSS），但它没法让用户输入换行——用户敲回车不会有反应，只是文本太长时自动换行显示，这和你想要的“输入文本换行”不是同一个需求，所以对你来说没用。

不推荐的替代方案（别折腾！） #

虽然有一些“不用textarea”的方法（比如给div加contenteditable="true"），但这些方案会带来一堆麻烦：

• 表单提交时不会自动收集这个元素的值，需要额外写JavaScript处理
• 存在光标定位、输入兼容性、格式混乱等问题
• 后期维护成本极高

所以完全没必要舍近求远，直接用<textarea>才是最省心的选择。

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