移动端长标题多行截断需用 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden 和 max-height；仅 webkit 内核有效，firefox 需 js 回退，慎用 flex/transform 干扰，并通过媒体查询按视口宽度响应式启用。
移动端长标题超出容器怎么截断成两行
直接用 text-overflow: ellipsis 不起作用，因为它是为单行设计的；多行截断必须配合 display: -webkit-box 和 -webkit-line-clamp，且只在 WebKit 内核浏览器（Chrome、Safari、Android WebView）中可靠生效。
常见错误是只加了 line-clamp 却忘了设 height 或 overflow: hidden，导致文本照常撑开容器。另外，-webkit-box-orient: vertical 必须显式声明，否则 line-clamp 无效。
实操建议：
- 给标题元素设置
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden - 必须限制最大高度（如
max-height: 48px），否则在部分 Android 低版本中仍可能溢出 - 慎用
line-height计算高度——不同字体渲染下实际行高有偏差，建议用em或固定像素微调
如何用媒体查询区分移动端并启用多行截断
不能靠设备判断，得按视口宽度响应。典型做法是默认不截断（保留完整标题），在 max-width: 768px 或更小的断点下才启用多行截断逻辑。
注意：别把断点设得太宽（比如 max-width: 1024px），否则 iPad 横屏时也会触发，影响可读性；也别设得太窄（如 max-width: 480px），小屏安卓机可能已需要截断。
推荐写法：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@media screen and (max-width: 767px) {
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 48px;
}
}
如果项目需兼容 Firefox，得额外加 JS fallback（比如用 textContent + canvas.measureText 或第三方库 clamp.js），纯 CSS 无解。
line-clamp 设为 2 但实际只显示一行或三行？
这是最常被忽略的兼容性陷阱：iOS Safari 16.4+ 和部分 Android Chrome 111+ 对 -webkit-line-clamp 的行为做了调整，当父容器有 flex 布局或 transform 时，截断可能失效。
排查顺序：
- 检查父级是否用了
display: flex且没设align-items: flex-start—— flex 容器默认拉伸子项，会破坏box的高度约束 - 确认没对标题元素应用
transform、position: absolute或will-change，这些会创建新层叠上下文，干扰截断计算 - 某些 Android 系统 WebView（尤其旧版）不支持
line-clamp小于 2，设为1可能完全不生效
临时绕过办法：把标题包一层 <div class="clamp-wrapper">，样式全写在 wrapper 上，让内容元素保持“干净”。
<h3>要不要用 clamp() 函数替代 line-clamp？</h3>
<p>不要。CSS <code>clamp() 是用于响应式缩放字号的（如 font-size: clamp(1rem, 2.5vw, 1.5rem)），和文本截断无关。它既不能控制行数，也不能添加省略号。
混淆点在于名字相似，但功能完全不重叠。真想动态控制截断行数，目前唯一标准方案仍是 -webkit-line-clamp + 媒体查询组合，再辅以 JS 补漏。
复杂点在于：你永远不知道用户用的是哪个 WebView 版本，所以线上必须加降级逻辑——比如服务端识别 UA 后注入不同 class，或前端用 CSS.supports('line-clamp', '2') 检测后动态 patch 样式。
