
本文介绍在 html `
在开发 Markdown 预览器等需要「代码式」纯文本展示的场景中,常需让
✅ 正确解法是:结合 readonly 属性与 CSS 强制横向滚动 + 禁用折行逻辑。原理在于:当
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!
⚠️ 注意事项:
- 必须添加 readonly(或 disabled),否则上述 CSS 在多数浏览器中无法阻止换行;
- 若需保持可编辑性,此方案不可用;此时应改用
+ contenteditable 或专用代码编辑器(如 CodeMirror); - white-space: pre 比 pre-wrap 更可靠,它严格保留所有空白符且不触发换行,配合 overflow-x: auto 实现精准的单行横向浏览体验。
总结:禁用









