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

category	subtitle	type	title	cols	cover
Components	排版	通用	Typography	1	https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg

文本的基本格式。

何时使用

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

API

Typography.Text

参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false
copyable	是否可拷贝，为对象时可进行各种自定义	boolean | copyable	false	copyable
delete	添加删除线样式	boolean	false
disabled	禁用文本	boolean	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean | editable	false	editable
ellipsis	自动溢出省略	boolean	false
keyboard	添加键盘样式	boolean	false	4.3.0
mark	添加标记样式	boolean	false
onClick	点击 Text 时的回调	(event) => void	-
strong	是否加粗	boolean	false
type	文本类型	secondary | success | warning | danger	-	success: 4.6.0
underline	添加下划线样式	boolean	false

Typography.Title

参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false
copyable	是否可拷贝，为对象时可进行各种自定义	boolean | copyable	false	copyable
delete	添加删除线样式	boolean	false
disabled	禁用文本	boolean	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean | editable	false	editable
ellipsis	自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等	boolean | ellipsis	false	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	-
type	文本类型	secondary | success | warning | danger	-	success: 4.6.0
underline	添加下划线样式	boolean	false

Typography.Paragraph

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

copyable

{
  text: string,
  onCopy: function,
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
}

参数	说明	类型	默认值	版本
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 },
  onStart: function,
  onChange: function(string),
  onCancel: function,
  onEnd: function,
}

参数	说明	类型	默认值	版本
autoSize	自动 resize 文本域	boolean | { minRows: number, maxRows: number }	-	4.4.0
editing	控制是否是编辑中状态	boolean	false
icon	自定义编辑图标	ReactNode	<EditOutlined />	4.6.0
maxLength	编辑中文本域最大长度	number	-	4.4.0
tooltip	自定义提示文本，为 false 时关闭	boolean | ReactNode	编辑	4.6.0
onCancel	按 ESC 退出编辑状态时触发	function	-
onChange	文本域编辑时触发	function(event)	-
onEnd	按 ENTER 结束编辑状态时触发	function	-	4.14.0
onStart	进入编辑中状态时触发	function	-
onCancel	按 ESC 退出编辑状态时触发	function	-
onEnd	按 ENTER 结束编辑状态时触发	function	-

ellipsis

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

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

FAQ

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

react-router 支持自定义渲染组件：

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