HTML实现段落截断显示“更多”功能，通常需要结合CSS和JavaScript来完成。下面是一个简单但有效的实现方法，适用于大多数网页场景。✅ 实现思路用CSS控制显示长度：使用 line-clamp 或者 height 限制段落显示的行数或高度。添加“展开全文”按钮：通过按钮触发内容的展开与收起。用JavaScript切换样式：通过动态修改类名来控制内容是否完全显示。🧩 示例代码（HTML +

实操建议：

• 优先在数据层提供 summary 和 content 两个字段，避免前端解析风险
• 若必须前端处理，可用 const temp = document.createElement('div'); temp.innerHTML = fullHtml;，再遍历子节点累计文本长度，遇到块级元素（如

  、

  ）或超长内联元素时主动截断
• 
可视为换行符参与计数，但不要把它当字符截掉——它没长度，却影响布局
• 图片（）默认不贡献可读文本，展开前可统一替换为占位文字如 [图片]，展开后再还原

移动端点击区域小、误触多，怎么优化交互体验

“展开全文”按钮常被放在右下角，手指点不准、连点两次、或和页面滚动冲突。这不是样式问题，是交互链路没对齐用户预期。

实操建议：

• 按钮最小尺寸设为 44px × 44px（iOS 触控热区标准），用 padding 扩展点击区，别只靠 font-size
• 加 touch-action: manipulation 减少移动端 300ms 延迟
• 点击后立即禁用按钮（btn.disabled = true），防止连点；展开完成再启用（或直接移除）
• 如果段落本身可滚动（比如在 modal 里），确保点击事件不被 scroll 冒泡干扰；必要时 event.preventDefault() 在按钮上

最麻烦的其实是富文本截断边界判断——DOM 结构越深，安全截取的成本越高；与其在每次渲染时计算，不如让 CMS 或 API 提前算好摘要。前端展开逻辑本身很简单，难的是“什么时候该信哪一段文本”。

好了，本文到此结束，带大家了解了《HTML实现段落截断显示“更多”功能，通常需要结合CSS和JavaScript来完成。下面是一个简单但有效的实现方法，适用于大多数网页场景。✅ 实现思路用CSS控制显示长度：使用 line-clamp 或者 height 限制段落显示的行数或高度。添加“展开全文”按钮：通过按钮触发内容的展开与收起。用JavaScript切换样式：通过动态修改类名来控制内容是否完全显示。🧩 示例代码（HTML + CSS + JavaScript）