Typography

Used to display titles, paragraphs, and text content.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Display headings, paragraphs, and text content.
Title: Show titles of different levels.
Text: Different styles of text.
Paragraph: Paragraph style.
Interactive: Provide functions such as copying and editing text.
Text Ellipsis(Recommended): When the text content exceeds the container, an ellipsis will be automatically displayed. When rows = 1, a single row is omitted. At this time, the operation button will not be displayed by default. You can set expandable = { single: true } to enable it.
Text Ellipsis - Action Button(Recommended): Customize action buttons through expandRender.
Ellipsis(Not recommended): It is not recommended to use the ellipsis attribute to enable folding. It is recommended to use the Typography.Ellipsis component instead. Omit multiple lines of text when there is insufficient space. Note: In the parent element flex mode, the omitted Typography's ellipsis scene will be affected. You can add width: 100% to make the Typography fill the entire parent element. **Attention: Attention: Using Google Translate results in a white screen error on the page? ** The component uses React.Fragement to cause problems. React native issues (Issue link). It can be solved by setting ellipsis.wrapper. For example ellipsis={{ wrapper: 'span' }}.
Ellipsis Controlled (Not recommended): It is not recommended to use the ellipsis attribute to enable folding. It is recommended to use the Typography.Ellipsis component instead. Ellipsis and related configuration controlled cases

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Typography

Property	Description	Type	DefaultValue
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Typography.Title

Property	Description	Type	DefaultValue	Version
bold	Bold style	boolean	`-`	-
code	Code block style	boolean	`-`	-
delete	Strikethrough style	boolean	`-`	-
disabled	Disabled style	boolean	`-`	-
underline	Underline style	boolean	`-`	-
type	Text type	'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning'	`-`	-
className	Additional css class	string \| string[]	`-`	-
ellipsis	Auto overflow omitted, see EllipsisConfig。Deprecated, `Typography.Ellipsis` is recommended instead	boolean \| EllipsisConfig	`-`	-
heading	Heading level, equivalent to `h1` `h2` `h3` `h4` `h5` `h6`	1 \| 2 \| 3 \| 4 \| 5 \| 6	`1`	-
mark	Mark style	boolean \| { color: string }	`-`	-
style	Additional style	CSSProperties	`-`	-
copyable	Whether to be copyable	\| boolean\| {text?: string;onCopy?: (text: string, e) => void;icon?: ReactNode;tooltips?: [ReactNode, ReactNode];tooltipProps?: TooltipProps;}	`-`	`onCopy` params `e` in `2.31.0`
editable	If editable. Can control edit state when is object	\| boolean\| {editing?: boolean;tooltipProps?: TooltipProps;onStart?: (text, e) => void;onChange?: (text) => void;onEnd?: (text) => void;}	`-`	`onStart` params `e` in `2.31.0`

Typography.Paragraph

Property	Description	Type	DefaultValue	Version
blockquote	Blockquote style	boolean	`-`	-
bold	Bold style	boolean	`-`	-
code	Code block style	boolean	`-`	-
delete	Strikethrough style	boolean	`-`	-
disabled	Disabled style	boolean	`-`	-
underline	Underline style	boolean	`-`	-
spacing	The line height of the paragraph. The default line height is recommended for long text (more than 5 lines),and the close line height of `close` is recommended for short text (less than or equal to 3 lines).	'default' \| 'close'	`default`	-
type	Text type	'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning'	`-`	-
className	Additional css class	string \| string[]	`-`	-
ellipsis	Auto overflow omitted, see EllipsisConfig。Deprecated, `Typography.Ellipsis` is recommended instead	boolean \| EllipsisConfig	`-`	-
mark	Mark style	boolean \| { color: string }	`-`	-
style	Additional style	CSSProperties	`-`	-
copyable	Whether to be copyable	\| boolean\| {text?: string;onCopy?: (text: string, e) => void;icon?: ReactNode;tooltips?: [ReactNode, ReactNode];tooltipProps?: TooltipProps;}	`-`	`onCopy` params `e` in `2.31.0`
editable	If editable. Can control edit state when is object	\| boolean\| {editing?: boolean;tooltipProps?: TooltipProps;onStart?: (text, e) => void;onChange?: (text) => void;onEnd?: (text) => void;}	`-`	`onStart` params `e` in `2.31.0`

Typography.Text

Property	Description	Type	DefaultValue	Version
bold	Bold style	boolean	`-`	-
code	Code block style	boolean	`-`	-
delete	Strikethrough style	boolean	`-`	-
disabled	Disabled style	boolean	`-`	-
underline	Underline style	boolean	`-`	-
type	Text type	'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning'	`-`	-
className	Additional css class	string \| string[]	`-`	-
ellipsis	Auto overflow omitted, see EllipsisConfig。Deprecated, `Typography.Ellipsis` is recommended instead	boolean \| EllipsisConfig	`-`	-
mark	Mark style	boolean \| { color: string }	`-`	-
style	Additional style	CSSProperties	`-`	-
copyable	Whether to be copyable	\| boolean\| {text?: string;onCopy?: (text: string, e) => void;icon?: ReactNode;tooltips?: [ReactNode, ReactNode];tooltipProps?: TooltipProps;}	`-`	`onCopy` params `e` in `2.31.0`
editable	If editable. Can control edit state when is object	\| boolean\| {editing?: boolean;tooltipProps?: TooltipProps;onStart?: (text, e) => void;onChange?: (text) => void;onEnd?: (text) => void;}	`-`	`onStart` params `e` in `2.31.0`

EllipsisConfig

Property	Description	Type	DefaultValue	Version
cssEllipsis	Automatic overflow omission (only strings are supported). In the case of simple single-line, css will be used by default to handle ellipsis to avoid complicated calculations.	boolean	`-`	`2.36.0` 将默认值改为 `false` 并支持多行CSS省略。
defaultExpanded	Default expanded state	boolean	`-`	`2.33.0`
expandable	Whether to support expand	boolean	`-`	-
expanded	whether to expand	boolean	`-`	`2.33.0`
rows	The number of omitted rows	number	`1`	-
ellipsisStr	ellipsis string	string	`...`	-
suffix	Suffix	string	`-`	-
showTooltip	Show Tooltip when configure ellipsis	boolean \| { type?: 'tooltip' \| 'popover'; props?: Record<string, any> }	`-`	-
expandNodes	Configure expand elements	ReactNode[]	`-`	-
onEllipsis	Callback when the ellipsis state changes, usually triggered by window resize。	(isEllipsis: boolean) => void	`-`	-
onExpand	Callback when the expand state changes, usually triggered by clicking the button	(isExpand: boolean, e) => void	`-`	e in `2.27.0`

Typography.Ellipsis

Property	Description	Type	DefaultValue
defaultExpanded	Expand by default	boolean	`-`
disabled	Whether to disable the text ellipsis	boolean	`-`
expanded	Whether to expand	boolean	`-`
rows	The number of omitted rows	number	`1`
className	Additional css class	string \| string[]	`-`
expandable	Whether to show control button. `2.61.0` version supports `single` attribute	boolean \| { single?: boolean }	`true`
showTooltip	Whether to display pop-up prompts	boolean \| TooltipProps	`-`
style	Additional style	CSSProperties	`-`
expandRender	Custom rendering control buttons	(expanded: boolean) => ReactNode	`-`
onEllipsis	Triggered when the omission status changes, and also when omitted for the first time.	(isEllipsis: boolean) => void	`-`
onExpand	Triggered when clicked to expand or collapse	(isExpand: boolean, ev: Event) => void	`-`

About exceeding omission

Exceeding and omitting are currently implemented in two ways: js dichotomy calculation truncation value and CSS exceeding and omitting. The two advantages and disadvantages are as follows:

Metrics	js Dichotomy	CSS Omit
Performance	Poor (multiple operations of dom calculation by dichotomy)	Good
Function	Good	Poor (string only)

By default, js dichotomy is used to continuously truncate the calculation to obtain the omitted critical value. At the same time, recalculation will be triggered multiple times when resize. Therefore, heavy use has a greater impact on performance, but this method will not insert additional style dom under the typesetting component.
Enabling ellipsis.cssEllipsis will omit the display by CSS style, which will significantly improve the performance in a large number of usage scenarios. But because the text-overflow style needs to be added, two <span/> dom will be added under the .arco-typography node

Note that the 2.36.0 version refactors and optimizes the excess omission, resulting in the main breaking changes as follows:

When ellipsis.cssEllipsis is enabled, an extra style dom is inserted under the typesetting component in order to add text-overflow, causing the dom structure to change.
ellipsis.cssEllipsis supports multi-line elision scenarios, and the default value is changed from true to false (to avoid DOM structure changes after upgrade).