移动端长文段落折叠展开应优先使用原生<details><summary>，兼顾无障碍与性能；需通过CSS扩大点击热区、替换图标，用max-height过渡实现滑动动画，并注意容器布局、状态管理及图片懒加载等适配细节。
在移动端长文里给段落加折叠展开功能，核心是兼顾触控友好、视觉清晰和性能稳定。原生 <details><summary> 最省事，但默认样式在手机上常显得小、点击区域窄；若要更可控的体验（比如带“展开更多”文案、平滑滑动、统一图标），就得用 CSS + JS 组合方案。
用 <details> + <summary> 快速上线
这是最轻量、无障碍支持最好的方式，所有现代移动浏览器（iOS Safari 16+、Chrome for Android、Edge Mobile）都原生支持。
- 把长段落包进
<details>，标题用<summary>，它必须是<details>的第一个子元素 - 移动端默认三角图标太小？加 CSS 扩大点击热区：
summary { padding: 16px; min-height: 44px; }（满足苹果推荐的最小触控尺寸） - 隐藏原生箭头并替换为自定义图标（如「▶」或「▼」）：
summary::marker { content: "▶"; }，再用details[open] summary::marker { content: "▼"; }切换方向 - SEO 和屏幕阅读器自动识别，内容始终可索引、可朗读，无需额外处理
用 max-height + transition 实现滑动动画
原生 <details> 没有滑动效果，纯显隐切换。要“慢慢拉下来”的观感，得靠 max-height 过渡——注意不能用 height: auto，它无法动画。
- 给段落容器设初始状态：
max-height: 80px; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); - 展开时设为足够大的值，比如
max-height: 500px（预估内容最多撑开的高度，太大动画卡顿，太小会截断） - JS 中不要直接写
style.height，而是操作max-height并同步overflow：展开后设overflow: visible，收起时恢复hidden - 为防文字含图片或异步加载内容导致高度计算不准，展开后可调用
offsetHeight强制重排，再设最终max-height
适配移动端的关键细节
长文在手机上容易因布局抖动、点击误触或文字截断出问题，这些点要提前处理：
立即学习“前端免费学习笔记（深入）”；
- 确保折叠容器是块级元素（
display: block），子元素避免float或position: absolute，否则影响高度测量 - 按钮文案别用 innerHTML 动态拼，改用
textContent更新：“展开” / “收起”，防止 XSS 且不破坏事件绑定 - 用
data-expanded="false"存状态，比查 class 更可靠；点击时先event.preventDefault()，尤其按钮在表单内 - 如果段落含
<img>，建议加loading="lazy"避免展开瞬间大量加载拖慢动画
要不要引入第三方库？
纯静态长文，不用。原生方案够用且更稳。但如果需智能截断（比如按行数限制、保留完整句子、支持中英文混排省略），可以考虑 multi-clamp 这类轻量库——它专注文本行数控制，不是通用折叠组件，适合“显示前3行，点‘更多’展开全部”这类场景。
