嘿，这个问题我之前也踩过坑！首先得明确一点：原生的<input type="text">本身就是单行输入控件，哪怕你加了white-space: normal这类CSS样式，它也没法自动换行显示多行内容——这是控件本身的特性决定的。不过没关系，我给你准备了两个不用jQuery的方案，都能完美实现你要的文本自动换行、高度自适应的效果：

方案一：CSS+Textarea替换（最简单直接） #

既然input天生不支持多行换行，那我们可以用<textarea>来替代它——毕竟textarea原生就支持多行显示，而且可以设置成只读模式，外观还能和input完全一致。

步骤1：修改HTML #

把原来的<input>换成<textarea>：

<textarea readonly class="lbl-txt">Hi ssfgsdg dgd gdf bdf bdf bdfb fb fb fb fb fb</textarea>

步骤2：应用CSS样式 #

在你提供的样式基础上，补充几个关键属性，让textarea看起来和input一样，同时自动换行自适应高度：

.lbl-txt {
  width: 250px;
  height: auto;
  white-space: normal;
  overflow: hidden;
  color: ghostwhite;
  font-size: 14px; /* 补全你未写完的字体大小 */
  border: 1px solid #ccc; /* 可选：模拟input的边框 */
  resize: none; /* 禁止用户拖动调整大小 */
  background: #fff; /* 可选：设置背景色，和input一致 */
  padding: 4px 6px; /* 可选：模拟input内边距 */
}

这样设置后，textarea会自动根据内容的多少调整高度，文本也会自动换行，完全满足你的需求。

方案二：纯JS动态替换（保留原有Input标签结构） #

如果因为某些原因你必须保留原有的<input>标签，那可以用JS自动把这些input替换成textarea，同时保留所有原有属性和值，不用手动修改HTML：

JS代码 #

// 获取所有需要处理的.lbl-txt类只读input元素
const targetInputs = document.querySelectorAll('input.lbl-txt[readonly]');

// 遍历替换每个input
targetInputs.forEach(input => {
  // 创建一个新的textarea元素
  const textarea = document.createElement('textarea');
  
  // 复制input的核心属性
  textarea.className = input.className;
  textarea.readOnly = input.readOnly;
  textarea.value = input.value;
  // 按需复制其他自定义属性（比如id、name）
  if (input.id) textarea.id = input.id;
  if (input.name) textarea.name = input.name;
  
  // 替换原input为textarea
  input.parentNode.replaceChild(textarea, input);
});

然后同样应用方案一里的CSS样式，就能实现和方案一完全一样的效果。

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