ant-design/components/typography/index.zh-CN.md

---
category: Components
subtitle: 排版
group: 通用
title: Typography
cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
demo:
  cols: 2
---

文本的基本格式。

## 何时使用

- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。
- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。

## 代码演示

<code src="./demo/basic.tsx">基本</code>
<code src="./demo/title.tsx">标题组件</code>
<code src="./demo/paragraph-debug.tsx" debug>标题与段落</code>
<code src="./demo/text.tsx">文本与超链接组件</code>
<code src="./demo/interactive.tsx">可交互</code>
<code src="./demo/ellipsis.tsx">省略号</code>
<code src="./demo/ellipsis-middle.tsx">省略中间</code>
<code src="./demo/ellipsis-debug.tsx" debug>省略号 Debug</code>
<code src="./demo/suffix.tsx">后缀</code>

## API

### Typography.Text

| 参数      | 说明                                                                                                                                                                                                                | 类型                                                                         | 默认值 | 版本                  |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------ | --------------------- |
| code      | 添加代码样式                                                                                                                                                                                                        | boolean                                                                      | false  |                       |
| copyable  | 是否可拷贝，为对象时可进行各种自定义                                                                                                                                                                                | boolean \| [copyable](#copyable)                                             | false  | [copyable](#copyable) |
| delete    | 添加删除线样式                                                                                                                                                                                                      | boolean                                                                      | false  |                       |
| disabled  | 禁用文本                                                                                                                                                                                                            | boolean                                                                      | false  |                       |
| editable  | 是否可编辑，为对象时可对编辑进行控制                                                                                                                                                                                | boolean \| [editable](#editable)                                             | false  | [editable](#editable) |
| ellipsis  | 自动溢出省略，为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph，Text 组件自身不带 100% 宽度样式，因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度，请手工配置宽度样式 | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false  | [ellipsis](#ellipsis) |
| keyboard  | 添加键盘样式                                                                                                                                                                                                        | boolean                                                                      | false  | 4.3.0                 |
| mark      | 添加标记样式                                                                                                                                                                                                        | boolean                                                                      | false  |                       |
| onClick   | 点击 Text 时的回调                                                                                                                                                                                                  | (event) => void                                                              | -      |                       |
| strong    | 是否加粗                                                                                                                                                                                                            | boolean                                                                      | false  |                       |
| italic    | 是否斜体                                                                                                                                                                                                            | boolean                                                                      | false  | 4.16.0                |
| type      | 文本类型                                                                                                                                                                                                            | `secondary` \| `success` \| `warning` \| `danger`                            | -      | success: 4.6.0        |
| underline | 添加下划线样式                                                                                                                                                                                                      | boolean                                                                      | false  |                       |

### Typography.Title

| 参数      | 说明                                                         | 类型                                              | 默认值 | 版本                  |
| --------- | ------------------------------------------------------------ | ------------------------------------------------- | ------ | --------------------- |
| code      | 添加代码样式                                                 | boolean                                           | false  |                       |
| copyable  | 是否可拷贝，为对象时可进行各种自定义                         | boolean \| [copyable](#copyable)                  | false  | [copyable](#copyable) |
| delete    | 添加删除线样式                                               | boolean                                           | false  |                       |
| disabled  | 禁用文本                                                     | boolean                                           | false  |                       |
| editable  | 是否可编辑，为对象时可对编辑进行控制                         | boolean \| [editable](#editable)                  | false  | [editable](#editable) |
| ellipsis  | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis)                  | false  | [ellipsis](#ellipsis) |
| level     | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5`                | number: 1, 2, 3, 4, 5                             | 1      | 5: 4.6.0              |
| mark      | 添加标记样式                                                 | boolean                                           | false  |                       |
| onClick   | 点击 Title 时的回调                                          | (event) => void                                   | -      |                       |
| italic    | 是否斜体                                                     | boolean                                           | false  | 4.16.0                |
| type      | 文本类型                                                     | `secondary` \| `success` \| `warning` \| `danger` | -      | success: 4.6.0        |
| underline | 添加下划线样式                                               | boolean                                           | false  |                       |

### Typography.Paragraph

| 参数      | 说明                                                         | 类型                                              | 默认值 | 版本                  |
| --------- | ------------------------------------------------------------ | ------------------------------------------------- | ------ | --------------------- |
| code      | 添加代码样式                                                 | boolean                                           | false  |                       |
| copyable  | 是否可拷贝，为对象时可进行各种自定义                         | boolean \| [copyable](#copyable)                  | false  | [copyable](#copyable) |
| delete    | 添加删除线样式                                               | boolean                                           | false  |                       |
| disabled  | 禁用文本                                                     | boolean                                           | false  |                       |
| editable  | 是否可编辑，为对象时可对编辑进行控制                         | boolean \| [editable](#editable)                  | false  | [editable](#editable) |
| ellipsis  | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis)                  | false  | [ellipsis](#ellipsis) |
| mark      | 添加标记样式                                                 | boolean                                           | false  |                       |
| onClick   | 点击 Paragraph 时的回调                                      | (event) => void                                   | -      |                       |
| strong    | 是否加粗                                                     | boolean                                           | false  |                       |
| italic    | 是否斜体                                                     | boolean                                           | false  | 4.16.0                |
| type      | 文本类型                                                     | `secondary` \| `success` \| `warning` \| `danger` | -      | success: 4.6.0        |
| underline | 添加下划线样式                                               | boolean                                           | false  |                       |

### copyable

    {
      text: string,
      onCopy: function(event),
      icon: ReactNode,
      tooltips: false | [ReactNode, ReactNode],
      format: 'text/plain' | 'text/html',
    }

| 参数     | 说明                                      | 类型                        | 默认值                | 版本   |
| -------- | ----------------------------------------- | --------------------------- | --------------------- | ------ |
| format   | 剪切板数据的 Mime Type                    | 'text/plain' \| 'text/html' | -                     | 4.21.0 |
| icon     | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode]     | -                     | 4.6.0  |
| text     | 拷贝到剪切板里的文本                      | string                      | -                     |        |
| tooltips | 自定义提示文案，为 false 时隐藏文案       | \[ReactNode, ReactNode]     | \[`复制`, `复制成功`] | 4.4.0  |
| onCopy   | 拷贝成功的回调函数                        | function                    | -                     |        |

### editable

    {
      icon: ReactNode,
      tooltip: boolean | ReactNode,
      editing: boolean,
      maxLength: number,
      autoSize: boolean | { minRows: number, maxRows: number },
      text: string,
      onChange: function(string),
      onCancel: function,
      onStart: function,
      onEnd: function,
      triggerType: ('icon' | 'text')[],
      enterIcon: ReactNode,
    }

| 参数        | 说明                                                                           | 类型                                            | 默认值              | 版本   |
| ----------- | ------------------------------------------------------------------------------ | ----------------------------------------------- | ------------------- | ------ |
| autoSize    | 自动 resize 文本域                                                             | boolean \| { minRows: number, maxRows: number } | -                   | 4.4.0  |
| editing     | 控制是否是编辑中状态                                                           | boolean                                         | false               |        |
| icon        | 自定义编辑图标                                                                 | ReactNode                                       | &lt;EditOutlined /> | 4.6.0  |
| maxLength   | 编辑中文本域最大长度                                                           | number                                          | -                   | 4.4.0  |
| tooltip     | 自定义提示文本，为 false 时关闭                                                | boolean \| ReactNode                            | `编辑`              | 4.6.0  |
| text        | 显式地指定编辑文案，为空时将隐式地使用 children                                | string                                          | -                   | 4.24.0 |
| onChange    | 文本域编辑时触发                                                               | function(value: string)                         | -                   |        |
| onCancel    | 按 ESC 退出编辑状态时触发                                                      | function                                        | -                   |        |
| onStart     | 进入编辑中状态时触发                                                           | function                                        | -                   |        |
| onEnd       | 按 ENTER 结束编辑状态时触发                                                    | function                                        | -                   | 4.14.0 |
| triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array&lt;`icon`\|`text`>                        | \[`icon`]           |        |
| enterIcon   | 在编辑段中自定义“enter”图标（传递“null”将删除图标）                            | ReactNode                                       | `<EnterOutlined />` | 4.17.0 |

### ellipsis

    {
      rows: number,
      expandable: boolean,
      suffix: string,
      symbol: ReactNode,
      tooltip: boolean | ReactNode | TooltipProps,
      onExpand: function(event),
      onEllipsis: function(ellipsis),
    }

| 参数       | 说明                 | 类型                                                             | 默认值 | 版本   |
| ---------- | -------------------- | ---------------------------------------------------------------- | ------ | ------ |
| expandable | 是否可展开           | boolean                                                          | -      |        |
| rows       | 最多显示的行数       | number                                                           | -      |        |
| suffix     | 自定义省略内容后缀   | string                                                           | -      |        |
| symbol     | 自定义展开描述文案   | ReactNode                                                        | `展开` |        |
| tooltip    | 省略时，展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | -      | 4.11.0 |
| onEllipsis | 触发省略时的回调     | function(ellipsis)                                               | -      | 4.2.0  |
| onExpand   | 点击展开时的回调     | function(event)                                                  | -      |        |

## FAQ

### Typography.Link 如何与 react-router 库集成？

`react-router` 支持[自定义](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#component-reactcomponent)渲染组件：

```tsx
<Link to="/" component={Typography.Link} />
```

**注意：** 这并不是和 react-router 的 Link 的执行逻辑等价 [参考](https://github.com/ant-design/ant-design/pull/26737/files#r488769888)