如何禁止textarea自动换行？Markdown预览器实现遇阻求助

你之前的方法没生效的原因：

• wrap="soft" 仅控制表单提交时不保留换行符，但浏览器仍会自动换行显示内容
• 单独的 white-space: nowrap 容易被textarea的默认样式覆盖，且未处理内容超出后的滚动问题

试试下面的组合方案，这是目前最有效的实现方式：

核心实现步骤 #

1. HTML属性控制：使用wrap="off"属性，直接告知浏览器不要对textarea内的文本进行自动换行处理
2. CSS样式增强：添加white-space: nowrap强制文本不换行，配合overflow-x: auto让超出宽度的内容显示横向滚动条，方便查看完整内容

完整代码示例 #

内联样式写法：

<textarea name="nowrap" wrap="off" style="white-space: nowrap; overflow-x: auto;">这里输入超长文本测试是否自动换行这里输入超长文本测试是否自动换行这里输入超长文本测试是否自动换行</textarea>

外部CSS写法：

textarea.no-wrap {
  white-space: nowrap;
  overflow-x: auto;
}

<textarea name="nowrap" wrap="off" class="no-wrap">测试内容</textarea>

这个方案在Chrome、Firefox、Edge等主流浏览器均能正常生效，可完美适配Markdown预览器的需求。

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