文本省略 Ellipsis
展示空间不足时，隐去部分内容并用“...”替代。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
展示空间不足时，隐去部分内容并用“...”替代。
何时使用
- 文本内容长度或高度超过列宽或行高。
- 图表中空间有限，文本内容无法完全显示。
- 自适应调整时宽度变小。
示例
Ellipsis
属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| collapseText | 收起操作的文案 | React.ReactNode | '' | |
| content | 文本内容 | string | - | |
| direction | 省略位置 | 'start' | 'end' | 'middle' | 'end' | |
| expandText | 展开操作的文案 | React.ReactNode | '' | |
| onContentClick | 点击文本内容时触发 | (e: React.MouseEvent) => void | - | |
| rows | 展示几行 | number | 1 | |
| stopPropagationForActionButtons | 阻止展开操作，收起操作引发的事件冒泡 | PropagationEvent[] | [] | |
| defaultExpanded | 是否默认展开 | boolean | false | |
| onExpand | 展开或收起的回调 | (expanded: boolean, info: { event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | - | 5.41.0 |
FAQ
文本内容包含较长且连续的数字或英文时，不会出现省略怎么办？
Ellipsis 组件内部会读取 word-break 这个 CSS 属性的值，如果未设置该样式属性的值，默认值为：normal。所以，当文本内容中包含大量数字或英文时，文本内容无法省略（浏览器的默认行为）。此时，如果需要让文本省略生效，可以手动在 Ellipsis 组件或其外层元素中，添加 word-break 样式（比如，word-break: break-word），Ellipsis 组件会完全遵循样式继承行为，拿到你设置的 word-break，从而实现自动省略。