外溢文本被截断时，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></span>），它默认不换行也不撑开宽度。必须配合块级行为或显式宽高。

• white-space: pre 保留空格和换行，但不自动换行；pre-wrap 才会在必要时折行
• 若内容在 <div> 里但父级设了 <code>max-width 且没设 word-break，长单词仍会撑破容器
• <pre class="brush:php;toolbar:false;"></pre> 标签自带 white-space: pre，但默认有上下边距和等宽字体，需重置才能匹配普通段落样式

编辑态下实时保留用户输入格式（比如富文本编辑器里的纯文本区）

用 <textarea></textarea> 最省事：它天然保留换行和空格，且支持 wrap="off" 防自动折行；但若必须用 contenteditable，就得手动处理：


HTML Extract
使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
下载
• 给元素设 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 到该容器上，否则横向溢出会被强制压缩。