如何在 textarea 中禁用文本换行（强制不换行显示）

本文介绍在 html `` 中实现强制不换行显示的正确方法，指出常见误区（如 `wrap` 属性和 `white-space: nowrap` 的无效性），并给出基于 `readonly` + <a >css</a> 的可靠解决方案。

在开发 markdown 预览器等需要「代码式」纯文本展示的场景中，常需让 内容横向延伸、禁止自动换行（即禁用软换行与折行渲染），以真实反映原始文本结构（例如长 URL、单行代码片段）。但需明确：<strong>原生 <textarea> 不支持通过 white-space: nowrap 或 wrap=”soft” 实现视觉上的不换行显示——这是因为：

• wrap 属性仅控制表单提交时内容的换行行为（soft/hard），不影响渲染样式；
• white-space: nowrap 在 上<strong>被<a >浏览器</a>忽略</strong>（<a href="https://seo.sqjnqi.com/tag/css/"><b>css</b></a> 规范明确限制其对可编辑替换元素的生效范围）。

✅ 正确解法是：结合 readonly 属性与 CSS 强制横向滚动 + 禁用折行逻辑。原理在于：当 设为只读后，它退化为“类展示容器”，此时 white-space: nowrap 虽仍不生效，但可通过以下组合达成目标效果：

textarea {   white-space: pre;        /* 保留空格与换行符，阻止自动折行 */   overflow-x: auto;        /* 启用水平滚动条 */   overflow-y: hidden;      /* 隐藏垂直滚动（可选） */   resize: horizontal;      /* 仅允许水平缩放（提升体验） */   width: 350px;   background-color: #c0d8d8;   /* 关键：移除默认换行行为 */   word-wrap: normal;   word-break: normal; }

Something is funny — this entire line will scroll horizontally instead of wr<a href="https://seo.sqjnqi.com/tag/app/"><b>app</b></a>ing!

⚠️ 注意事项：

• 必须添加 readonly（或 disabled），否则上述 CSS 在多数浏览器中无法阻止换行；
• 若需保持可编辑性，此方案不可用；此时应改用

   + contenteditable 或专用代码编辑器（如 CodeMirror）；

• white-space: pre 比 pre-wrap 更可靠，它严格保留所有空白符且不触发换行，配合 overflow-x: auto 实现精准的单行横向浏览体验。

总结：禁用 换行不是样式问题，而是交互模式问题。readonly 是开启“可控展示模式”的钥匙，再辅以恰当的 CSS，即可稳定实现 Markdown 预览器所需的紧凑、无折行文本展示效果。