段落截断显示更多实现方法

实操建议：

• 优先在数据层提供 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 提前算好摘要。前端展开逻辑本身很简单，难的是“什么时候该信哪一段文本”。

以上就是《段落截断显示更多实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！