超长文本不折行溢出的根本原因是white-space、overflow、word-break未正确配合；white-space: pre-wrap是唯一既保留用户换行符又支持自动折行的方案，适用于表单提交含回车的文本，且不可与text-overflow: ellipsis混用。
超长文本在HTML里不折行、溢出容器、撑破布局——根本不是“内容太长”的问题，而是white-space、overflow、word-break三者没配对好。
white-space: pre-wrap 是唯一保留换行符又自动折行的方案
用户从表单（如
此时必须用：white-space: pre-wrap
- 它原样保留所有
\n、\t和空格，同时允许在容器右边界自动折行 - 不用额外加
<br>或<p>包裹，适合评论、日志、Markdown渲染后的内容 - 注意：别跟
text-overflow: ellipsis混用——pre-wrap不支持省略号，会失效
table td 内容不换行？先关掉 white-space: nowrap
表格单元格默认会换行，但很多UI框架或重置样式（如Bootstrap 4+）悄悄给td加了white-space: nowrap，导致一串URL或长英文单词死活不折行，表格被拉宽甚至出现横向滚动条。
立即学习“前端免费学习笔记（深入）”；
修复只需一行CSS：
td {
white-space: normal;
word-wrap: break-word; /* 旧写法，兼容IE */
overflow-wrap: break-word; /* 新标准名，推荐 */
}-
word-wrap: break-word和overflow-wrap: break-word等价，后者是W3C标准名，建议优先用 - 必须配合固定宽度（如
width: 200px或max-width: 200px），否则浏览器不知道在哪折 - 慎用
word-break: break-all——它会在任意字符间切断，中文可能断在字中间，体验差
单行截断显示…必须满足三个条件
text-overflow: ellipsis看着简单，但漏掉任一条件就完全不生效：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器
width或max-width必须有明确值（百分比也行，但不能是auto） -
white-space: nowrap——强制不换行，才能“挤”出溢出 -
overflow: hidden——溢出部分不可见，visible或scroll都会让省略号消失
典型写法：
.truncate {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}注意：title属性可补全提示，但不是所有设备都支持鼠标悬停（比如iOS Safari）。
多行截断用 -webkit-line-clamp 要兜底
想限制最多显示3行，末尾加“…”？现代Chrome/Edge/Safari支持-webkit-line-clamp，但Firefox和旧版Android WebView不认。
安全写法分两层：
- 用
display: -webkit-box+-webkit-line-clamp: 3实现优雅截断 - 同时加
max-height: 3em（假设line-height: 1em）和overflow: hidden作为降级——Firefox里文字会被硬裁，至少不撑破布局 - 别依赖
text-overflow——它只对单行有效，多行场景下纯属无效配置
关键点：行高必须固定，max-height得是line-height × 行数，否则降级时裁切位置错乱。
真正难的不是选哪个属性，而是理解它们之间的约束关系——white-space决定换行逻辑起点，overflow决定溢出是否可见，text-overflow只是overflow: hidden下的一个视觉装饰。改一个，往往要同步调另外两个。
