排版

文本的基本格式。

何时使用

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

代码演示

• 基本 · basic

• 标题组件 · title

• 文本与超链接组件 · text

• 可编辑 · editable

• 可复制 · copyable

• 省略号 · ellipsis

• 受控省略展开/收起 · ellipsis-controlled

• 省略中间 · ellipsis-middle

• 后缀 · suffix

• 表格 · table

API

通用属性参考：通用属性

Typography.Text

Typography.Title

Typography.Paragraph

actions

{
  placement: 'start' | 'end',
}

copyable

{
  text: string | (() => string | Promise<string>),
  onCopy: function(event),
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
  format: 'text/plain' | 'text/html',
  tabIndex: number,
}

editable

{
  icon: ReactNode,
  tooltip: 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,
  tabIndex: number,
}

ellipsis

interface EllipsisConfig {
  rows: number;
  /** `5.16.0` 新增 `collapsible` */
  expandable: boolean | 'collapsible';
  suffix: string;
  /** `5.16.0` 新增渲染函数 */
  symbol: ReactNode | ((expanded: boolean) => ReactNode);
  tooltip: ReactNode | TooltipProps;
  /** `5.16.0` 新增 */
  defaultExpanded: boolean;
  /** `5.16.0` 新增 */
  expanded: boolean;
  /** `5.16.0` 新增 `info` */
  onExpand: (event: MouseEvent, info: { expanded: boolean }) => void;
  onEllipsis: (ellipsis: boolean) => void;
}

Semantic DOM

语义说明来源: vendor/components/typography/demo/_semantic.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

声明来源: vendor/components/typography/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import { operationUnit } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks } from '../../theme/internal';

import {
  getCopyableStyles,
  getEditableStyles,
  getEllipsisStyles,
  getLinkStyles,
  getResetStyles,
  getTitleStyles,
} from './mixins';

/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
  /**
   * @desc 标题上间距
   * @descEN Margin top of title
   */
  titleMarginTop: number | string;
  /**
   * @desc 标题下间距
   * @descEN Margin bottom of title
   */
  titleMarginBottom: number | string;
}

export type TypographyToken = FullToken<'Typography'>;

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

安装并复现示例

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

• vendor/components/typography/Base/CopyBtn.tsx
• vendor/components/typography/Base/Ellipsis.tsx
• vendor/components/typography/Base/EllipsisTooltip.tsx
• vendor/components/typography/Base/index.tsx
• vendor/components/typography/Editable.tsx
• vendor/components/typography/Link.tsx
• vendor/components/typography/Paragraph.tsx
• vendor/components/typography/Text.tsx
• vendor/components/typography/Title.tsx
• vendor/components/typography/Typography.tsx
• vendor/components/typography/index.tsx
• vendor/components/typography/style/index.ts

来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。