# 文本省略 Ellipsis

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/ellipsis
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

展示空间不足时，隐去部分内容并用“...”替代。

## 安装

```bash
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`，从而实现自动省略。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt