text-overflow: ellipsis 仅对单行文本生效，需配合 white-space: nowrap 和固定宽度；多行省略须用 -webkit-box 系列属性，缺一不可，且 Firefox 不支持，需 JS 或服务端 fallback。
为什么直接加 text-overflow: ellipsis 不生效
因为 text-overflow: ellipsis 只对单行文本有效，它依赖于 white-space: nowrap 和块级容器的固定宽度。而 <p> 默认是换行的块级元素，去掉 white-space: nowrap 后，text-overflow 就完全失效——哪怕你加了 overflow: hidden，也只会裁掉底部几行，不显示省略号。
-webkit-line-clamp 必须搭配的三个属性
要让 p 标签实现多行省略，核心是启用 WebKit 的弹性盒截断机制，但必须四者齐备：
-
display: -webkit-box：把p当作弹性盒子处理（不能用flex或block） -
-webkit-box-orient: vertical：指定子元素（即文字流）垂直堆叠 -
-webkit-line-clamp: 2（或你需要的行数）：真正控制截断行数 -
overflow: hidden：隐藏超出部分（text-overflow在这里不起作用，可省略）
漏掉任意一个，比如只写 -webkit-line-clamp 而没设 display: -webkit-box，就完全无效。
p 标签用多行省略时的常见坑
实际写的时候容易栽在这些地方：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
height或max-height，导致-webkit-line-clamp行为不可预测（尤其在 flex 布局里） - 给
p加了padding或line-height但没同步调整max-height，结果最后一行被截半或留白过多 - 在 Firefox 中完全不支持
-webkit-前缀属性，需要 fallback 方案（比如 JS 计算字符数 + 截断，或用::after渐变遮罩） -
p里混有<strong>、<span>等内联元素时，-webkit-box仍能工作，但若嵌套了<div>这类块级元素，整个机制会崩溃
兼容性差但最简方案的实际写法
如果只要求在 Chrome、Safari、Edge（新版）、iOS/Android WebView 中工作，直接这样写即可：
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
width: 100%;
}
注意：width: 100% 是为了确保在 flex 或 grid 容器中也能正确计算宽度；-webkit-line-clamp 的值必须是整数，不能是 auto 或百分比。
真正麻烦的不是怎么写，而是当设计要求「所有浏览器都显示省略号」时，-webkit- 方案就只是个临时补丁，得立刻上 JS 或服务端截断——这点常被忽略，直到 QA 在 Firefox 里点开页面才暴露。
