COMPONENT 66 · Content & Media
截断文字 / 展开更多
Truncated Text / Show More
也叫Read MoreLine ClampShow More省略文字
先限制长文字显示行数，再由用户展开查看完整内容。
Initially limits long text and lets the user reveal the full content.
ANATOMY & USAGE
结构与使用建议
组成部分
- 被截断文本
- 渐隐或省略提示
- 展开收起按钮
适合使用
- 长描述会打断列表扫描，但完整内容仍需就地访问时。
不建议使用
- 截断会隐藏关键决策信息或文字本来很短时。
键盘与无障碍
- 使用有明确名称的 button，同步 aria-expanded；全文在展开后仍保持自然阅读顺序。
DESCRIBE IT TO AI
这样告诉编程助手
实现截断文字 / 展开更多（Truncated Text / Show More）：先限制长文字显示行数，再由用户展开查看完整内容。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<section class="demo stack">
<p id="description" class="truncated">设计系统让团队用一致的组件、术语与交互模式构建产品，并减少重复决策。</p>
<button type="button" aria-expanded="false" aria-controls="description">展开更多</button>
</section>