text-overflow: ellipsis 仅对单行文本生效，需配合 white-space: nowrap 和固定宽度；多行省略须用 -webkit-box 系列属性，缺一不可，且 firefox 不支持，需 js 或服务端 fallback。
为什么直接加 text-overflow: ellipsis 不生效
因为 text-overflow: ellipsis 只对单行文本有效，它依赖于 white-space: nowrap 和块级容器的固定宽度。而 <p></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 标签用多行省略时的常见坑
实际写的时候容易栽在这些地方：
- 父容器没设
height或max-height，导致-webkit-line-clamp行为不可预测（尤其在 flex 布局里） - 给
p加了padding或line-height但没同步调整max-height，结果最后一行被截半或留白过多 - 在 Firefox 中完全不支持
-webkit-前缀属性，需要 fallback 方案（比如 JS 计算字符数 + 截断，或用::after渐变遮罩） -
p里混有<strong></strong>、<span></span>等内联元素时，-webkit-box仍能工作，但若嵌套了<div> 这类块级元素，整个机制会崩溃 <h3>兼容性差但最简方案的实际写法</h3> <p>如果只要求在 Chrome、Safari、Edge（新版）、iOS/Android WebView 中工作，直接这样写即可：</p> <pre class="brush:php;toolbar:false;">p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%; }</pre> <p>注意：<code>width: 100%是为了确保在 flex 或 grid 容器中也能正确计算宽度；-webkit-line-clamp的值必须是整数，不能是auto或百分比。真正麻烦的不是怎么写，而是当设计要求「所有浏览器都显示省略号」时，
-webkit-方案就只是个临时补丁，得立刻上 JS 或服务端截断——这点常被忽略，直到 QA 在 Firefox 里点开页面才暴露。
