line-clamp截断需配合display:-webkit-box、-webkit-box-orient:vertical和overflow:hidden；现代浏览器支持display:block+line-clamp但建议保留前缀，且需高度约束、正确处理中英文换行与溢出检测。
多行文本截断用 line-clamp 最省事，但得配好 display
直接加 line-clamp 不生效？大概率是没设对 display。这个 CSS 属性只在 display: -webkit-box 下起作用，且必须配合 -webkit-box-orient: vertical 和 overflow: hidden。
常见错误：只写 line-clamp: 3，其他全靠猜；或者用了 flex 或 block 就想让它截断——不行。
-
display: -webkit-box是硬性前提（现代浏览器也支持标准display: block+line-clamp，但兼容性仍建议保留前缀） - 必须设
height或让父容器有高度约束，否则line-clamp可能不触发 - 中文换行受
word-break和white-space影响，若文字挤成一行不换，加word-break: break-word
“展开更多”按钮要精准控制显隐，别靠 JS 算行高
用 JS 测量元素实际行数或高度再决定是否显示“展开更多”，容易因字体加载、缩放、Zoom、动态内容导致误判。更稳的方式是用 CSS 检测是否溢出，再交由 JS 控制状态。
实操建议：
- 给容器加
data-truncated="true"初始态，CSS 里用[data-truncated="true"]控制截断样式 - “展开更多”点击后，移除该属性，并设
max-height: none或取消line-clamp - 避免用
scrollHeight > clientHeight判定——字体未加载完时clientHeight可能偏小，造成闪现/误收起
IE 和旧版 Safari 不支持 line-clamp，降级方案要轻量
IE 完全不认 line-clamp；iOS
推荐做法：
- 服务端或构建时预估字数（比如中文 20 字 ≈ 3 行），加个
data-fallback-lines="3"属性 - CSS 中用
@supports not (-webkit-line-clamp: 2)包裹降级规则，例如限制max-height+overflow: hidden - 不模拟“渐变遮罩”，那需要额外 DOM 和定位，移动端滚动性能差；纯色背景 + 省略号更稳
展开收起动画不能用 height 过渡，改用 max-height
直接对 height 做 transition 会失效，因为从 auto 到具体值无法插值。必须用 max-height，但要注意数值不能太小或太大。
关键细节：
- 收起态设
max-height: 60px（对应 3 行 × 行高 20px），展开态设max-height: 600px（够用即可，别写10000px，影响动画性能） - 过渡时间控制在
0.3s内，超过会显得拖沓；搭配ease-out更自然 - 动画过程中若内容含图片或字体加载中，
max-height可能撑不开，建议在img上加loading="lazy"并监听load后重置容器高度
真正难的不是截断或展开，而是让它们在字体加载、缩放、暗色模式、不同语言混排下都保持一致行为。别过早抽象成组件，先在真实页面里跑通这几种边界场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
