单行截断必须同时满足white-space: nowrap、overflow: hidden和明确width/max-width；多行截断需用display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp三者配合overflow: hidden，但firefox不支持，需降级处理。
现代浏览器中，单行截断用 text-overflow: ellipsis 是最稳的；多行截断必须靠 display: -webkit-box + -webkit-line-clamp，但 Firefox 不支持，不能当“全平台方案”用。
单行截断为什么只认 white-space: nowrap？
因为 text-overflow 的设计逻辑就是“先不让它换行，再挤出溢出，最后藏掉+加点”。只要 white-space 允许折行（比如 normal 或 pre-wrap），text-overflow 就直接被忽略——浏览器认为“没溢出”，自然不触发省略号。
-
white-space: nowrap是硬性前提，漏掉就完全不生效 -
overflow: hidden不能是visible或scroll，否则溢出部分可见或可滚动，省略号无意义 -
width或max-width必须有明确值（百分比、rem、px都行，但不能是auto） - 如果父容器是 Flex 项目，且没设
min-width: 0，即使写了overflow: hidden，也可能因 flex 默认最小尺寸而失效
多行截断为何必须三件套一起写？
-webkit-line-clamp 不是独立属性，它只是 display: -webkit-box 渲染模式下的一个“行数开关”。没有 -webkit-box-orient: vertical，盒子就不知道往哪堆内容；没有 display: -webkit-box，-webkit-line-clamp 就是废代码。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 三者缺一不可：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3 - 必须配合
overflow: hidden，否则末行可能撑开容器 -
max-height建议用calc(line-height * N + 容错余量)，比固定像素更健壮（比如max-height: calc(1.5em * 3 + 0.25em)） - 在 Flex 容器里，子项需显式设
min-width: 0，否则-webkit-line-clamp可能不触发
Firefox 下多行截断只能降级，别硬扛
Firefox 至今没实现 -webkit-line-clamp，也没有对应的标准 CSS 属性。所谓“兼容写法”基本是妥协方案：
- 伪元素 +
line-height+max-height模拟：语义弱、换行错位风险高、不可选文本 - JS 动态测量 + 截字符串：得先 clone 内容、临时插入 DOM、测
scrollHeight、再切文本，性能和可访问性都受影响 - 服务端返回摘要字段（如
summary和full_content）：最干净，但需要后端配合 - 别用
word-break: break-all强行折中文——会断在字中间，阅读体验极差
“展开更多”按钮不是加个 display: none 就完事
真实场景里，用户点了“展开”，内容要平滑过渡、状态要可感知、屏幕阅读器要能读出来。这三点决定了你不能只靠 CSS 切换显示隐藏。
- 按钮必须带
aria-expanded="false"和aria-controls="content-id"，否则辅助技术无法识别控制关系 - 展开动画建议用
max-height过渡，而不是height（后者需精确值，响应式下难维护） - 不要把按钮塞进截断容器内部——展开后新内容可能盖住按钮，或导致 Safari 渲染异常
- 用户操作后状态应持久化，比如用
localStorage记录 ID，避免刷新后又折叠
真正麻烦的从来不是“怎么截”，而是“截完之后怎么让交互可信、可访问、可维护”。尤其是多行场景，CSS 方案和 JS 方案之间没有银弹，只有根据目标浏览器、内容结构、团队能力做的取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
