外溢文本被截断时，white-space: pre 保留换行和空格但不自动换行，pre-wrap 才支持必要时折行；需注意 overflow、display 类型、flex/grid 布局干扰及 min-width: 0 等配套设置。
外溢文本被截断时如何保留原始换行和空格
直接用 white-space: pre 或 pre-wrap 就能保住换行符和连续空格，但得注意它不解决容器宽度不足导致的横向溢出问题——这是两个独立问题，常被混为一谈。
为什么 white-space: pre 有时看起来没生效
常见原因是父容器设置了 overflow: hidden 或 text-overflow: ellipsis，或者用了 display: inline 元素（如 <span>），它默认不换行也不撑开宽度。必须配合块级行为或显式宽高。
-
white-space: pre保留空格和换行，但不自动换行；pre-wrap才会在必要时折行 - 若内容在
<div>里但父级设了max-width且没设word-break，长单词仍会撑破容器 -
<pre>标签自带white-space: pre，但默认有上下边距和等宽字体，需重置才能匹配普通段落样式
编辑态下实时保留用户输入格式（比如富文本编辑器里的纯文本区）
用 <textarea> 最省事：它天然保留换行和空格，且支持 wrap="off" 防自动折行；但若必须用 contenteditable，就得手动处理：
- 给元素设
white-space: pre-wrap+overflow-wrap: break-word - 禁用浏览器默认的粘贴格式化：监听
paste事件，用event.clipboardData.getData('text/plain')提取纯文本 - 避免用
innerText读取内容——它会把连续空格压成一个；改用textContent或innerHTML（后者要防 XSS）
overflow-x: auto 和 overflow-x: scroll 的实际差别
前者只在内容超出时显示滚动条，后者始终显示（哪怕没溢出），可能引发布局抖动。更稳妥的是用 overflow-x: auto + scrollbar-width: none（Firefox）和 -webkit-scrollbar（Chrome）隐藏滚动条，但保留滚动能力。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：如果容器是 flex 或 grid 子项，overflow 可能被父级 min-width: 0 或 flex-shrink: 0 干扰——这时得显式加 min-width: 0 到该容器上，否则横向溢出会被强制压缩。
