# Typography

- Page: https://jiguang132.com/resources/arco-design/docs/typography
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used to display titles, paragraphs, and text content.

## Install

```bash
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](https://github.com/facebook/react/issues/17256)). 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](#ellipsisconfig)。Deprecated, `Typography.Ellipsis` is recommended instead|boolean \| [EllipsisConfig](typography#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](tooltip#tooltip);} |`-`|`onCopy` params `e` in `2.31.0`|
|editable|If editable. Can control edit state when is object|\| boolean\| {editing?: boolean;tooltipProps?: [TooltipProps](tooltip#tooltip);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](#ellipsisconfig)。Deprecated, `Typography.Ellipsis` is recommended instead|boolean \| [EllipsisConfig](typography#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](tooltip#tooltip);} |`-`|`onCopy` params `e` in `2.31.0`|
|editable|If editable. Can control edit state when is object|\| boolean\| {editing?: boolean;tooltipProps?: [TooltipProps](tooltip#tooltip);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](#ellipsisconfig)。Deprecated, `Typography.Ellipsis` is recommended instead|boolean \| [EllipsisConfig](typography#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](tooltip#tooltip);} |`-`|`onCopy` params `e` in `2.31.0`|
|editable|If editable. Can control edit state when is object|\| boolean\| {editing?: boolean;tooltipProps?: [TooltipProps](tooltip#tooltip);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](tooltip#tooltip) |`-`|
|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).

---

Index of all JGuang resources: https://jiguang132.com/llms.txt