超长文本不折行溢出的根本原因是white-space、overflow、word-break未正确配合；white-space: pre-wrap是唯一既保留用户换行符又支持自动折行的方案，适用于表单提交含回车的文本，且不可与text-overflow: ellipsis混用。

超长文本在HTML里不折行、溢出容器、撑破布局——根本不是“内容太长”的问题，而是white-space、overflow、word-break三者没配对好。

white-space: pre-wrap 是唯一保留换行符又自动折行的方案

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！