line-clamp在移动端不生效的常见原因包括：未设display: -webkit-box、缺-webkit-box-orient: vertical、父容器为flex、文本非块级子元素、未设overflow: hidden，以及line-height未统一。
line-clamp在移动端不生效的常见原因
直接写 display: -webkit-box + -webkit-line-clamp 在 iOS Safari 低版本或某些安卓 WebView 里根本没反应，不是代码写错了，是缺了关键前提：必须同时满足块级、单行内联元素（如 span）不行，且不能有 flex 容器直接包裹文本节点。
- 确保父容器设了
display: -webkit-box，而不是display: flex（哪怕只差一个前缀，-webkit-line-clamp就失效） - 文本内容必须是块级子元素（比如
p或div），不能是裸文本或span - 安卓部分 WebView（如微信内置浏览器旧版）需要加
-webkit-box-orient: vertical，漏掉就完全不截断 - 别在
flex容器上直接套line-clamp—— 它和flex渲染逻辑冲突，得用嵌套一层div隔开
用flex布局配合line-clamp的正确嵌套结构
想让多行省略和 flex 排版共存（比如头像+文字卡片），不能把 line-clamp 往 flex 项上硬套，得拆成两层：外层 flex 控制对齐，内层独立盒子做截断。
- 外层用
display: flex布局，控制图标、文字区域的相对位置 - 文字区域单独包一层
div，设display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2 - 这层文字容器必须设
overflow: hidden，否则超出部分会撑开布局 - 避免给文字容器设
height或max-height——line-clamp是基于行高计算的，固定高度反而破坏截断逻辑
.card {
display: flex;
align-items: flex-start;
}
.card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
}
line-clamp兼容性差时的降级方案
当目标环境明确不支持 -webkit-line-clamp（比如 Android 4.4 WebView 或某些鸿蒙版本），硬加前缀也没用，得换思路。
- 服务端截断最稳：按字数或字符数预处理，但无法响应字体大小变化
- JS 方案用
offsetHeight+ 动态删字/删节点，但滚动中频繁触发影响性能，慎用于长列表 - 纯 CSS 替代：用
display: -webkit-box+text-overflow: ellipsis只能单行；多行只能靠伪元素遮罩（::after覆盖渐变色+绝对定位），但需要固定行高且无法精确到“第几行末尾” - 真正要兼顾体验和兼容，建议用
@supports (-webkit-line-clamp: 2)包裹样式，不支持时 fallback 到 JS 截断或不限制行数
line-height 和 font-size 对截断行数的影响
-webkit-line-clamp: 3 看似截三行，实际显示可能只有两行半甚至被撑开——根本原因是行高没控死。
-
line-clamp计算的是“行盒高度 × 行数”，不是像素值，所以line-height: 1.5和line-height: 24px在不同字号下表现差异很大 - 务必统一用无单位数值（如
line-height: 1.4）或固定像素值，避免混用em/rem导致缩放时错行 - 字体加载完成前，浏览器可能用后备字体渲染，行高突变导致截断错位，可加
font-display: swap或监听fontfaceobserver后重绘 - iOS Safari 对
line-height小数精度敏感，1.333比1.33更稳定
事情说清了就结束。真正难的不是写对那三行 CSS，是猜准用户手机里跑的是哪个内核、哪个版本、有没有改过系统字体设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
