常见原因是未预留容器高度致父容器塌陷，应改用max-height+overflow:hidden配合transition；JS需用dataset管理状态、textContent更新文案，并注意重排与兼容性处理。
点击展开后文字不显示或错位
常见原因是直接用 display: none 隐藏了块级元素，但没预留“展开”前的容器高度，导致父容器塌陷、后续布局错乱。更稳妥的做法是用 max-height + overflow: hidden 控制可见区域，配合 CSS 过渡动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给需要展开收起的文本容器设固定初始
max-height（如max-height: 80px），并加overflow: hidden - 添加类名（如
.expanded）控制展开态：max-height: 500px（值需大于内容实际高度，但不宜过大，否则动画卡顿） - 必须加
transition: max-height 0.3s ease-in-out，否则无动画效果 - 避免对
height做过渡——它无法从auto动画到具体值
JavaScript 怎么安全地切换展开状态
别用 innerHTML 反复拼接“展开/收起”文字，容易 XSS 或破坏已有事件绑定；也别只靠 toggle 类名却忘了同步按钮文案。核心是把状态和 DOM 更新解耦。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
dataset记录当前状态：el.dataset.expanded = "true"，比查 class 更可靠 - 按钮文案统一由 JS 控制：
btn.textContent = isExpanded ? '收起' : '展开' - 监听点击时，先
preventDefault()（尤其按钮在 form 里） - 如果文本含
<img alt="HTML怎么做可展开文字_html长文本展开收起功能实现【通俗易懂】" >或异步加载内容，展开后调用offsetHeight强制重排，确保max-height计算准确
长文本里有换行、列表或内联样式怎么办
纯 div + max-height 对
<br>、
<ul></ul>、<strong></strong> 这些没问题，但若内部有浮动、绝对定位或 flex 子项，可能撑不出真实高度，导致展开后底部被截断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保展开容器用
display: block（默认即可），子元素不设position: absolute或float - 如有
flex子项，加align-items: flex-start防止基线对齐干扰高度计算 - 慎用
line-clamp：它和max-height冲突，且不支持所有浏览器（IE 完全不支持，Safari 旧版有 bug） - 若必须兼容 IE，改用 JS 测高：
el.scrollHeight获取真实高度，再赋给max-height
移动端点击无响应或连点两次才生效
本质是移动端 300ms 点击延迟或点击穿透（比如按钮在 fixed 层下被误触）。另外，部分安卓 WebView 对 click 事件冒泡处理异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
cursor: pointer和touch-action: manipulation，减少延迟 - 优先用
addEventListener('click', ...)，而非onclick属性，便于复用和移除 - 加防抖：300ms 内重复点击忽略，避免手快连点触发两次状态翻转
- 如果按钮是
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a>，务必加event.preventDefault()，否则页面跳到顶部
max-height 不够用；还有就是忘了在 resize 事件里重新校准——窗口缩放后，原本够用的 max-height 可能突然变小。 
