CSS 如何实现文本展开/收起动画？

Question

CSS 如何实现文本展开/收起动画？

仓乃文 · Accepted Answer

利用 max-width 过渡可以实现文本的展开和收起动画，配合 overflow: hidden 和 white-space: nowrap 控制文本显示。 ```css .expand-text { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.5s ease; vertical-align: bottom; } .expand-text.open { max-width: 500px; } ``` HTML 结构： ```html CSS 是 Cascading Style Sheets 的缩写 ``` 补充说明： - max-width 过渡实现文本平滑展开，比 width 更灵活 - white-space: nowrap 防止文本换行，确保单行展开 - display: inline-block 让元素可以设置宽度同时保持行内排列 - 适合缩写展开、标签说明文字等场景