ant-design/components/typography/index.en-US.md

---
category: Components
type: General
title: Typography
cols: 1
---

Basic text writing, including headings, body text, lists, and more.

## When To Use

- When need to display a title or paragraph contents in Articles/Blogs/Notes.
- When you need copyable/editable/ellipsis texts.

## API

### Typography.Text

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false |  |
| copyable | Config copy. Can set copy text and callback when is an object | boolean \| { text: string, onCopy: Function } | false |  |
| delete | Deleted line style | boolean | false |  |
| disabled | Disabled content | boolean | false |  |
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
| ellipsis | Display ellipsis when text overflows | boolean | false |  |
| mark | Marked style | boolean | false |  |
| keyboard | Keyboard style | boolean | false | 4.3.0 |
| underline | Underlined style | boolean | false |  |
| onChange | Trigger when user edits the content | Function(string) | - |  |
| strong | Bold style | boolean | false |  |
| type | Content type | `secondary` \| `warning` \| `danger` | - |  |

### Typography.Title

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false |  |
| copyable | Config copy. Can set copy text and callback when is an object | boolean \| { text: string, onCopy: Function } | false |  |
| delete | Deleted line style | boolean | false |  |
| disabled | Disabled content | boolean | false |  |
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | number: `1`, `2`, `3`, `4` | 1 |  |
| mark | Marked style | boolean | false |  |
| underline | Underlined style | boolean | false |  |
| onChange | Trigger when user edits the content | Function(string) | - |  |
| type | Content type | `secondary` \| `warning` \| `danger` | - |  |

### Typography.Paragraph

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false |  |
| copyable | Config copy. Can set copy text and callback when is an object | boolean \| { text: string, onCopy: Function } | false |  |
| delete | Deleted line style | boolean | false |  |
| disabled | Disabled content | boolean | false |  |
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| mark | Marked style | boolean | false |  |
| underline | Underlined style | boolean | false |  |
| onChange | Trigger when user edits the content | Function(string) | - |  |
| strong | Bold style | boolean | false |  |
| type | Content type | `secondary` \| `warning` \| `danger` | - |  |

## FAQ

### How to use Typography.Link in react-router?

`react-router` support [customize](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#component-reactcomponent) render component:

```tsx
<Link to="/" component={Typography.Link} />
```
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint 2019-02-19 11:42:05 +08:00			`---`
			`category: Components`
			`type: General`
			`title: Typography`
			`cols: 1`
			`---`

:memo: Optimize some docs 2019-03-19 11:40:36 +08:00			`Basic text writing, including headings, body text, lists, and more.`
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint 2019-02-19 11:42:05 +08:00
			`## When To Use`

General components doc tweaks (#19416) * Documentation - Button Component * Documentation - Icon Component * Documentation - Typography component 2019-10-25 09:56:30 +08:00			`- When need to display a title or paragraph contents in Articles/Blogs/Notes.`
:memo: Optimize some docs 2019-03-19 11:40:36 +08:00			`- When you need copyable/editable/ellipsis texts.`
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint 2019-02-19 11:42:05 +08:00
			`## API`

			`### Typography.Text`

docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			`\| Property \| Description \| Type \| Default \| Version \|`
			`\| --- \| --- \| --- \| --- \| --- \|`
Removed version cloumn in 4.0 (#19872) 2019-11-22 10:33:34 +08:00			`\| code \| Code style \| boolean \| false \| \|`
			`\| copyable \| Config copy. Can set copy text and callback when is an object \| boolean \\| { text: string, onCopy: Function } \| false \| \|`
			`\| delete \| Deleted line style \| boolean \| false \| \|`
			`\| disabled \| Disabled content \| boolean \| false \| \|`
			`\| editable \| Editable. Can control edit state when is object \| boolean \\| { editing: boolean, onStart: Function, onChange: Function(string) } \| false \| \|`
			`\| ellipsis \| Display ellipsis when text overflows \| boolean \| false \| \|`
			`\| mark \| Marked style \| boolean \| false \| \|`
Text support keyboard (#24195) 2020-05-16 14:43:29 +08:00			`\| keyboard \| Keyboard style \| boolean \| false \| 4.3.0 \|`
Removed version cloumn in 4.0 (#19872) 2019-11-22 10:33:34 +08:00			`\| underline \| Underlined style \| boolean \| false \| \|`
			`\| onChange \| Trigger when user edits the content \| Function(string) \| - \| \|`
			`\| strong \| Bold style \| boolean \| false \| \|`
docs: Format string notation of all components (#20970) 2020-01-17 17:23:48 +08:00			\| type \| Content type \| `secondary` \\| `warning` \\| `danger` \| - \| \|
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint 2019-02-19 11:42:05 +08:00
			`### Typography.Title`

docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			`\| Property \| Description \| Type \| Default \| Version \|`
			`\| --- \| --- \| --- \| --- \| --- \|`
Removed version cloumn in 4.0 (#19872) 2019-11-22 10:33:34 +08:00			`\| code \| Code style \| boolean \| false \| \|`
			`\| copyable \| Config copy. Can set copy text and callback when is an object \| boolean \\| { text: string, onCopy: Function } \| false \| \|`
			`\| delete \| Deleted line style \| boolean \| false \| \|`
			`\| disabled \| Disabled content \| boolean \| false \| \|`
			`\| editable \| Editable. Can control edit state when is object \| boolean \\| { editing: boolean, onStart: Function, onChange: Function(string) } \| false \| \|`
feat: Typography support onEllipsis (#23414) * feat: support onEllipsis * add test case * update doc 2020-04-21 10:13:57 +08:00			`\| ellipsis \| Display ellipsis when text overflows. Can configure rows and expandable by using object \| boolean \\| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } \| false \| onEllipsis: 4.2.0 \|`
Removed version cloumn in 4.0 (#19872) 2019-11-22 10:33:34 +08:00			\| level \| Set content importance. Match with `h1`, `h2`, `h3`, `h4` \| number: `1`, `2`, `3`, `4` \| 1 \| \|
			`\| mark \| Marked style \| boolean \| false \| \|`
			`\| underline \| Underlined style \| boolean \| false \| \|`
			`\| onChange \| Trigger when user edits the content \| Function(string) \| - \| \|`
docs: Format string notation of all components (#20970) 2020-01-17 17:23:48 +08:00			\| type \| Content type \| `secondary` \\| `warning` \\| `danger` \| - \| \|
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint 2019-02-19 11:42:05 +08:00
			`### Typography.Paragraph`

docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			`\| Property \| Description \| Type \| Default \| Version \|`
			`\| --- \| --- \| --- \| --- \| --- \|`
Removed version cloumn in 4.0 (#19872) 2019-11-22 10:33:34 +08:00			`\| code \| Code style \| boolean \| false \| \|`
			`\| copyable \| Config copy. Can set copy text and callback when is an object \| boolean \\| { text: string, onCopy: Function } \| false \| \|`
			`\| delete \| Deleted line style \| boolean \| false \| \|`
			`\| disabled \| Disabled content \| boolean \| false \| \|`
			`\| editable \| Editable. Can control edit state when is object \| boolean \\| { editing: boolean, onStart: Function, onChange: Function(string) } \| false \| \|`
feat: add custom expand style for typography.paragraph (#24385) * feat: add custom expand style for typography.paragraph * feat: delete filed-form * fix: lint error * feat: add test case * fix: typo 2020-05-26 11:54:52 +08:00			`\| ellipsis \| Display ellipsis when text overflows. Can configure rows expandable and suffix by using object \| boolean \\| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } \| false \| onEllipsis: 4.2.0 \|`
Removed version cloumn in 4.0 (#19872) 2019-11-22 10:33:34 +08:00			`\| mark \| Marked style \| boolean \| false \| \|`
			`\| underline \| Underlined style \| boolean \| false \| \|`
			`\| onChange \| Trigger when user edits the content \| Function(string) \| - \| \|`
			`\| strong \| Bold style \| boolean \| false \| \|`
docs: Format string notation of all components (#20970) 2020-01-17 17:23:48 +08:00			\| type \| Content type \| `secondary` \\| `warning` \\| `danger` \| - \| \|
feat: Add Link component to prepare for rm global style (#24019) * init * move to base * add link component * update snasphot * update snasphot of test * move to Typography * update test case 2020-05-11 14:28:57 +08:00
			`## FAQ`

			`### How to use Typography.Link in react-router?`

			`react-router` support [customize](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#component-reactcomponent) render component:

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