用 css 限制 标签最大显示行数需同时设置四条样式：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: n、overflow: hidden，并确保元素有明确宽度；firefox 不支持该方案，需 js 回退。
用 CSS 限制 `
` 标签最大显示行数，核心是组合 WebKit 的弹性盒模型属性，**不是靠 height 或 line-height 硬卡**，否则容易裁字、破坏可访问性或在不同字体下失效。
必须的三行关键 CSS
要让段落最多显示 N 行（比如 2 行或 3 行），以下四条样式需同时设置：
- display: -webkit-box — 把段落当作弹性盒子处理
- -webkit-box-orient: vertical — 子元素（即文字行）垂直排列
- -webkit-line-clamp: N — 明确指定最大行数（N 可为 1、2、3…）
- overflow: hidden — 隐藏超出部分
别忘了加宽度限制
这段 CSS 不会生效，除非父容器或 `
` 本身有明确宽度。例如：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给 `
` 设置 width 或 max-width（如
max-width: 300px） - 或者让 `
` 的父容器设了宽度，且不设
white-space: nowrap - 没宽度时，-webkit-line-clamp 会当没写，文字照常撑开
省略号只在单行可靠，多行需注意
text-overflow: ellipsis 在多行场景下基本无效 — 它只对单行 `white-space: nowrap` 生效。多行截断后，末尾不会自动加“…”。如果需要视觉省略效果，得用 JS 动态插入伪元素或 canvas 绘制，或者接受纯截断（无省略号）。
兼容性与回退建议
Firefox 目前完全不支持 -webkit-line-clamp，Safari 和 Chrome 支持良好。若需全浏览器一致：
- 简单场景：忽略 Firefox，或只在移动端用（iOS Safari 支持稳定）
- 重要场景：用 JavaScript 测量行高 + 计算
max-height，再配overflow: hidden - 避免踩坑：不用
height固定高度，不依赖br换行，不设word-break: break-all断单词
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
