white-space 是控制 html 编辑器中空格与换行表现最直接、最底层的 css 手段，但需按场景选值：预览区用 pre-wrap，内联元素用 nowrap，代码块优先用 标签，contenteditable 区域宜保持 normal 并辅以 js 处理。
white-space 是控制 HTML 编辑器中空格与换行表现最直接、最底层的 CSS 手段，但它不是万能开关——用错值或忽略上下文，反而会让编辑器内容“看起来不对”甚至“无法编辑”。关键在于：编辑器内容是否来自用户输入？是否需保留缩进？是否要防溢出？下面分场景说清楚。
用户输入预览区显示原始换行和空格（如评论、消息摘要）
这类区域常见于富文本编辑器下方的纯文本预览、后台管理中的字段展示等。用户敲了回车、连按空格，你得让它们“看得见”。pre-wrap 是首选，它既保留所有空格/制表符/换行符，又允许内容在容器边界自动折行，避免横向滚动条。
- 别用
pre：虽然保留格式，但禁止自动换行，长段落会撑破容器，移动端尤其灾难 - 慎用
pre-line：它会把连续空格合并成一个，用户刻意对齐的缩进（比如用空格模拟列表）就没了 - 必须配合
font-family: monospace或至少font-variant-numeric: tabular-nums：否则空格宽度不一致，对齐失效
编辑器内联元素（如按钮文字、标签名）强制单行不换行
比如富文本工具栏里的 <button>加粗</button>，或者内容卡片顶部的分类标签，常因容器窄而意外折行。这时用 white-space: nowrap 最稳妥。
- 它只影响该元素内部，不影响父容器布局，适合局部控制
- 必须搭配
overflow: hidden和text-overflow: ellipsis，否则超长文字会溢出遮挡相邻按钮 - 注意：如果标签内容本身含换行符（比如后端返回带
\n的字符串），nowrap会把换行当空格处理，显示成一长串——此时应先在 JS 层.replace(/\s+/g, ' ')清理
代码块或日志类内容展示（非编辑态）
编辑器里嵌入的代码预览窗、终端输出面板，语义上就是“预格式化”，应该用 <pre class="brush:php;toolbar:false;"></pre> 标签，而不是仅靠 white-space: pre。
-
<pre class="brush:php;toolbar:false;"></pre>自带white-space: pre，且有语义价值：屏幕阅读器识别为代码块，搜索引擎更易理解内容类型 - 若硬要用
div+white-space: pre，必须手动设置font-family: monospace和tab-size: 4，否则缩进错乱 - 想支持响应式换行？改用
white-space: pre-wrap，但要注意：它允许在单词中间断行（比如超长 URL），必要时加overflow-wrap: break-word
富文本编辑器内容区本身（contenteditable）
这是最容易踩坑的地方：white-space 对 contenteditable 元素的编辑行为有隐性影响。比如设成 pre，用户按回车会插入真实 <br>，但按空格不会产生可见空格（浏览器默认过滤连续空格）；设成 normal，用户敲多个空格会被合并。
- 实际推荐：保持
white-space: normal（默认），靠 JS 拦截keydown处理Tab键插入 或<span style="margin-left: 2em"></span>来模拟缩进 - 绝对不要给
contenteditable设white-space: nowrap：会导致光标无法进入换行后的位置，编辑体验崩坏 - 若需保留用户粘贴进来的缩进，用
pre-line更安全——它保留换行，又把多余空格合并，避免渲染出“看不见的空白堆叠”
真正难的不是选哪个值，而是意识到：同一份用户输入，在编辑态、预览态、导出态可能需要不同的 white-space 策略。别试图用一个 CSS 规则打天下，该用 JS 清洗就清洗，该换语义标签就换标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
