HTML中怎么让元素在超出指定行数后折叠-html教程-PHP中文网

纯css无法可靠实现“超出n行折叠”，必须用javascript配合dom测量；-webkit-box+line-clamp存在兼容性差、无法动态响应样式变化、不能插入交互按钮及多语言截断不准等问题。

html中怎么让元素在超出指定行数后折叠

纯 CSS 无法可靠判断“第 N 行”，所以必须用 JavaScript 配合 DOM 测量才能准确实现“超出 N 行后折叠”。原生 <details></details> 只能整块展开/收起，不按行数截断；line-clamp 虽然看起来能用，但在 Safari 中对非 WebKit 内核兼容差，且无法动态响应字体变化或容器缩放。

为什么 `display: -webkit-box` + `line-clamp` 不够用

这个组合在 Chrome/Edge 中表现尚可，但存在几个硬伤：

-webkit-line-clamp 是非标准属性，Firefox 完全不支持（截至 2026 年仍无原生计划）
一旦父容器 font-size 或 line-height 动态改变，截断位置会错乱，且无法重算
无法在截断处插入“展开”按钮 —— line-clamp 是纯渲染层裁剪，DOM 内容完整存在，但不可见也不可交互
多语言混排（如中英数字夹杂）时，字符宽度不均，line-clamp 按“行高 × 行数”粗略截断，常出现半字被切、末行空出大段空白等问题

用 `getBoundingClientRect()` + `textarea` 模拟高度判断

这是目前最稳定、可响应式重算的方案，核心是：用一个隐藏 textarea 模拟 N 行所需高度，再比对真实内容容器的 bottom 值。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

把目标文本包裹进 <div class="ellipsis-container">...</div>，内部放一个同样式、rows="N" 的 <textarea></textarea> 作为高度参考
确保 textarea 和文本容器使用完全一致的 font-family、font-size、line-height、padding，否则高度偏差会直接导致误判
调用 element.getBoundingClientRect().bottom 分别获取文本容器和 textarea 的底部坐标，若前者 > 后者，则说明溢出
溢出时，不能简单用 substring() 截字符 —— 中文没有空格分隔，需用 Range + getClientRects() 找到第 N 行末尾的 DOM 位置，再反推文本索引

用 `ResizeObserver` 响应布局变化

用户缩放页面、切换横竖屏、甚至系统字体设置变更，都会让行数临界点移动。只在初始化时判断一次必然失效。

必须用 new ResizeObserver(() => { checkEllipsis(); }) 监听容器尺寸变化
避免高频触发：checkEllipsis 内部建议加防抖（如 setTimeout 延迟 50ms），否则窗口拖拽时可能卡顿
如果文本是异步加载（比如 API 返回后插入），要在 innerHTML 设置完后手动调用一次 checkEllipsis()，ResizeObserver 不会捕获内容变化
注意内存泄漏：组件卸载时记得 observer.unobserve(container)，尤其在 React/Vue 等框架中容易忽略

真正难的不是“怎么截”，而是“什么时候重截”——字体加载延迟、em 单位缩放、第三方样式注入、甚至 macOS 的字体平滑开关，都可能让同一段代码在不同设备上给出不同行数。上线前务必在 iOS Safari、Chrome Android、Windows Edge 多端实测真实文本流，而不是只看开发机效果。