纯css无法实现点击展开/收起交互，必须用js控制max-height；text-overflow: ellipsis需满足white-space、overflow、宽高限制三前提；多行截断推荐-webkit-line-clamp，firefox需js回退。
纯 CSS 无法实现“点击展开/收起”的交互逻辑，text-overflow 只负责截断显示，不控制行为；必须配合 JavaScript 才能完成“省略→点击展开→再点击收起”这一完整流程。
text-overflow: ellipsis 只在特定条件下生效
很多人写了 text-overflow: ellipsis 却没效果，根本原因是它有三个硬性前提：
-
white-space: nowrap（单行截断）或white-space: normal+display: block+ 固定高度 +overflow: hidden（多行截断需额外技巧） -
overflow: hidden（必须显式设置） -
width（单行）或height+line-clamp（现代多行，但兼容性有限）
例如单行安全写法：
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
注意：text-overflow 对 flex 或 grid 容器内的子元素可能失效，需确保目标元素是块级且尺寸受限。
多行截断兼容方案：-webkit-line-clamp 是最实用的折中选择
虽然 display: -webkit-box + -webkit-line-clamp 是 WebKit 专属，但它在 Chrome、Safari、Edge（新版）、iOS/Android WebView 中稳定可用，是目前唯一无需 JS 就能实现多行省略的方案：
.multi-truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示2行 */
overflow: hidden;
}
关键点：
- 不能和
height或max-height混用，否则可能截断异常 - 父容器不能设
flex-direction: column且未限制高度，否则-webkit-box布局会失效 - Firefox 不支持
-webkit-line-clamp，需 JS 回退（见下一条）
真正可交互的“展开/收起”必须用 JS 控制 height 或 max-height
纯 CSS 没法响应点击事件切换状态，所以得靠 JS 动态控制容器高度。常见错误是直接设 height: auto —— 这会导致 CSS 动画失效（auto 无法参与过渡）。正确做法是：
- 先用
getBoundingClientRect().height或scrollHeight获取完整内容高度 - 给元素设
max-height并过渡该属性（比height更稳妥） - 初始状态设
max-height为截断所需高度（如 2 行 ≈1.5em × 2 = 3em），展开时设为scrollHeight值 - 收起后记得清除内联
max-height，避免影响后续重绘
简易判断是否需要展开的逻辑：
const el = document.querySelector('.text');
if (el.scrollHeight > el.clientHeight) {
// 内容溢出，可显示“展开”按钮
}
注意：scrollHeight 包含 padding，clientHeight 不包含 border，比较前保持一致更可靠。
Firefox 下多行截断 fallback 要用 JS 模拟 line-clamp
当 -webkit-line-clamp 不可用时（如 Firefox），只能靠 JS 计算行高 + 截取字符数，但容易断词。更健壮的做法是：
- 用
Range+getBoundingClientRect()逐行检测最后一行位置是否超出目标区域 - 或用
element.innerText.substring(0, n)+ 二分查找，找到刚好不溢出的最大长度 - 务必加防抖，避免窗口 resize 频繁触发重算
这不是“加个 class 就完事”的功能，而是涉及布局测量、状态管理、边界条件（空格、换行符、中文标点）的真实工程问题。别被“保姆级教程”标题骗了——省略线本身简单，可控的展开收起才是复杂点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
