此功能仍处于实验阶段。“Experimental”表示这是早期实现，可能会发生重大且破坏性的更改。

Text 是一个核心组件，使用库的排版系统来渲染文本。

用法

Text 可用于渲染任何文本内容，例如 HTML p 或 span。

import { __experimentalText as Text } from '@wordpress/components';

function Example() {
    return <Text>Code is Poetry</Text>;
}

属性

adjustLineHeightForInnerControls

类型: "large","medium","small","xSmall"

自动计算渲染文本和控制元素（如 TextInput）内容的适当行高值。

import { __experimentalText as Text, TextInput } from '@wordpress/components';

function Example() {
    return (
        <Text adjustLineHeightForInnerControls={"small"}>
            Lorem ipsum dolor sit amet, consectetur
            <TextInput value="adipiscing elit..." />
        </Text>
    );
}

align

类型: CSSProperties['textAlign']

调整文本对齐方式。

import { __experimentalText as Text } from '@wordpress/components';

function Example() {
    return (
        <Text align="center" isBlock>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </Text>
    );
}

color

类型: CSSProperties['color']

调整文本颜色。

display

类型: CSSProperties['display']

调整 CSS display。

ellipsis

类型: string

设置 truncate 时使用的省略号字符串。

ellipsizeMode

类型: "auto","head","tail","middle"

确定截断的位置。例如，我们可以将文本在中间截断。要做到这一点，我们需要将 ellipsizeMode 设置为 middle 并设置文本 limit。

  • auto：在没有 limit 的情况下自动修剪末尾内容。
  • head：修剪开头内容。需要 limit。
  • middle：修剪中间内容。需要 limit。
  • tail：修剪末尾内容。需要 limit。

highlightCaseSensitive

类型: boolean

转义 highlightWords 中在正则表达式中有意义的字符。

highlightEscape

类型: boolean

确定 highlightWords 是否区分大小写。

highlightSanitize

类型: boolean

搜索词数组。除非 highlightEscape 为 true，否则字符串搜索词会自动转换为 RegExps。

highlightWords

类型: any[]

可以使用 highlightWords 突出显示 Text 中的字母或单词。

import { __experimentalText as Text } from '@wordpress/components';

function Example() {
    return (
        <Text highlightWords={ [ 'pi' ] }>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
            neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
            mollis mi. Morbi id elementum massa. Suspendisse interdum auctor
            ligula eget cursus. In fermentum ultricies mauris, pharetra
            fermentum erat pellentesque id.
        </Text>
    );
}

isBlock

类型: boolean

设置 Text 具有 display: block。

注意：仅当 isBlock 为 false 时，文本截断才有效。

isDestructive

类型: boolean

渲染破坏性颜色。

limit

类型: number

设置 truncate 时的最大字符数。

lineHeight

类型: CSSProperties['lineHeight']

根据排版系统调整所有文本的行高。

numberOfLines

类型: number

将文本内容限制为特定的 numberOfLines，并在末尾添加 ellipsis。

optimizeReadabilityFor

类型: CSSProperties['color']

Text 的颜色可以适应背景色以实现最佳可读性。optimizeReadabilityFor 除了接受标准 CSS 颜色值（例如 Hex、RGB、HSL 等…）外，还可以接受 CSS 变量。

import { __experimentalText as Text, View } from '@wordpress/components';

function Example() {
    const backgroundColor = 'blue';

    return (
        <View style={ { backgroundColor } }>
            <Text optimizeReadabilityFor={ backgroundColor }>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </Text>
        </View>
    );
}

size

类型: CSSProperties['fontSize'],TextSize

根据排版系统调整文本大小。Text 可以渲染多种字体大小，这些大小会根据排版系统进行自动计算和适配。size 值可以是系统预设、number 或自定义单位值（string），例如 30em。

import { __experimentalText as Text } from '@wordpress/components';

function Example() {
    return <Text size="largeTitle">Code is Poetry</Text>;
}

truncate

类型: boolean

启用文本截断。当设置 truncate 时，我们可以以多种方式截断长文本。

注意：如果 isBlock 属性设置为 true，则文本截断将不起作用。

import { __experimentalText as Text } from '@wordpress/components';

function Example() {
    return (
        <Text truncate>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
            neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
            mollis mi. Morbi id elementum massa. Suspendisse interdum auctor
            ligula eget cursus. In fermentum ultricies mauris, pharetra
            fermentum erat pellentesque id.
        </Text>
    );
}

upperCase

类型: boolean

将文本内容转换为大写。

variant

类型: "muted"

调整文本样式变体。

import { __experimentalText as Text } from '@wordpress/components';

function Example() {
    return <Text variant="muted">Code is Poetry</Text>;
}

weight

类型: CSSProperties['fontWeight'],TextWeight

调整文本的字重。