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 控制状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给容器加
data-truncated="true"初始态，CSS 里用[data-truncated="true"]控制截断样式 - “展开更多”点击后，移除该属性，并设
max-height: none或取消line-clamp - 避免用
scrollHeight > clientHeight判定——字体未加载完时clientHeight可能偏小，造成闪现/误收起
IE 和旧版 Safari 不支持 line-clamp，降级方案要轻量
IE 完全不认 line-clamp；iOS < 8.4、Safari < 10 也不支持。强行 polyfill 行高计算容易卡顿，不如用简单可靠的 fallback。
推荐做法：
- 服务端或构建时预估字数（比如中文 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后重置容器高度
真正难的不是截断或展开，而是让它们在字体加载、缩放、暗色模式、不同语言混排下都保持一致行为。别过早抽象成组件，先在真实页面里跑通这几种边界场景。
