单行摘要需四步：设max-width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis；多行用-webkit-line-clamp配合弹性盒子；Flex/表格中需加min-width: 0防撑开；关键信息禁用省略号以保语义与可访问性。
段落标签（<p>）本身不带截断能力，要让它展示摘要并带省略号，关键不是改标签，而是用 CSS 控制它的渲染行为。核心是让文字“被框住、不换行、被切掉、加三点”——四步缺一不可。
单行摘要：强制一行 + 固定宽度
适用于标题、短描述等需严格控制在一行的场景：
-
必须设宽度：给
<p>加width或max-width（如max-width: 300px），否则浏览器不知道“溢出点”在哪 -
禁换行：
white-space: nowrap，否则文字会自动折行，省略号永远不会触发 -
隐藏溢出：
overflow: hidden，这是省略号出现的前提条件 -
启用省略号：
text-overflow: ellipsis，它只在此时才起作用
示例样式：
.ellipsis-p {max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行摘要：用 WebKit 方案限制行数
段落常用于多行描述，想显示前两行或三行后加省略号，目前最实用的是 -webkit-line-clamp：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
必须用弹性盒子模拟多行容器：
display: -webkit-box+-webkit-box-orient: vertical -
明确指定行数：
-webkit-line-clamp: 2（不能是变量或 calc） - 仍需 overflow: hidden，否则截断无效
- 高度建议留余量：比如 2 行 × 1.5 行高 ≈ 3em，避免切掉字形下半部分
注意：Firefox 不支持该方案，若需全兼容，得用 JS 判断或伪元素渐变遮罩替代。
表格或 Flex 布局里 <p> 容易失效？加 min-width: 0
当 <p> 放在 display: flex 或 table-cell 中时，它默认会撑开自身宽度，导致根本没“溢出”。解决方法很简单：
- 给
<p>加min-width: 0，打破 flex item 的最小宽度保护机制 - 或配合
flex-shrink: 0防止被压缩过度 - 表格中还需确保父
<td>有max-width，并设table-layout: fixed提升列宽可控性
语义与可访问性：别对关键信息用省略号
省略号是视觉提示，不是内容处理。DOM 里文本依然完整，屏幕阅读器会读全部内容，而用户只看到一部分——造成信息差：
- ID、URL、错误码、金额等不可省略字段，宁可用
title属性悬停提示，或服务端提前截断返回带省略号的字符串 - 若必须前端截断，建议用 JS 检测
scrollWidth > clientWidth后再动态添加省略号，更可靠 - 避免在响应式字号变化频繁的页面硬写固定
height，否则缩放后可能错位或漏字
