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

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

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

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

✅ 正确解法是：结合 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 wrapping!

⚠️ 注意事项：