排版

用于设置文本样式的 JSX 样式属性

字体系列

¥Font Family

使用 fontFamily 属性设置文本元素的字体系列。

¥Use the fontFamily prop to set the font family of a text element.

<Text fontFamily="mono">Hello World</Text>

属性	CSS 属性	标记类别
`fontFamily`	`font-family`	`fonts`

属性	CSS 属性	标记类别
`fontSize`	`font-size`	`fonts`

文本样式

¥Text Styles

使用 textStyle 属性同时应用字体大小、行高和字母间距组合。

¥Use the textStyle prop to apply both a font size, line height, and letter spacing composition at once.

<Text textStyle="xs">Hello World</Text>
<Text textStyle="sm">Hello World</Text>
<Text textStyle="md">Hello World</Text>
<Text textStyle="lg">Hello World</Text>
<Text textStyle="xl">Hello World</Text>
<Text textStyle="2xl">Hello World</Text>
<Text textStyle="3xl">Hello World</Text>
<Text textStyle="4xl">Hello World</Text>
<Text textStyle="5xl">Hello World</Text>

属性	配置
`textStyle`	`theme.textStyles`

字体样式

¥Font Style

使用 fontStyle 属性设置文本元素的字体样式。

¥Use the fontStyle prop to set the font style of a text element.

<Text fontStyle="italic">Hello World</Text>

属性	CSS 属性	标记类别
`fontStyle`	`font-style`	none

字体粗细

¥Font Weight

使用 fontWeight 属性设置文本元素的字体粗细。

¥Use the fontWeight prop to set the font weight of a text element.

// hardcoded values
<Text fontWeight="600">Hello World</Text>

// token values
<Text fontWeight="semibold">Hello World</Text>

属性	CSS 属性	标记类别
`fontWeight`	`font-weight`	`fontWeights`

字体变体数字

¥Font Variant Numeric

使用 fontVariantNumeric 属性设置文本元素的字体变体数字。

¥Use the fontVariantNumeric prop to set the font variant numeric of a text element.

<Text fontVariantNumeric="lining-nums">Hello World</Text>

属性	CSS 属性	标记类别
`fontVariantNumeric`	`font-variant-numeric`	none

字母间距

¥Letter Spacing

使用 letterSpacing 属性设置文本元素的字母间距。

¥Use the letterSpacing prop to set the letter spacing of a text element.

// hardcoded values
<Text letterSpacing="0.1rem">Hello World</Text>

// token values
<Text letterSpacing="tight">Hello World</Text>
<Text letterSpacing="wide">Hello World</Text>
<Text letterSpacing="wider">Hello World</Text>
<Text letterSpacing="widest">Hello World</Text>

属性	CSS 属性	标记类别
`letterSpacing`	`letter-spacing`	`letterSpacings`

截断

¥Truncation

使用 truncate 属性截断文本。

¥Use the truncate prop to truncate text.

<Text truncate>Lorem ipsum dolor sit amet...</Text>

属性	CSS 属性	标记类别
`truncate`	`text-overflow`	none

线条限制

¥Line Clamp

使用 lineClamp 属性截断多行文本。将 lineClamp 设置为 none 以禁用截断。

¥Use the lineClamp prop to truncate multi-line text. Set lineClamp to none to disable truncation.

<Text lineClamp="2">Lorem ipsum dolor sit amet...</Text>

// revert truncation
<Text lineClamp="none">Lorem ipsum dolor sit amet...</Text>

属性	CSS 属性	标记类别
`lineClamp`	`webkit-line-clamp`	none

线条高度

¥Line Height

使用 lineHeight 属性设置文本元素的行高。

¥Use the lineHeight prop to set the line height of a text element.

// hardcoded values
<Text lineHeight="1.5">Hello World</Text>

// token values
<Text lineHeight="tall">Hello World</Text>

属性	CSS 属性	标记类别
`lineHeight`	`line-height`	`lineHeights`

文本对齐

¥Text Align

使用 textAlign 属性设置文本元素的文本对齐方式。

¥Use the textAlign prop to set the text alignment of a text element.

<Text textAlign="left">Hello World</Text>
<Text textAlign="center">Hello World</Text>
<Text textAlign="right">Hello World</Text>
<Text textAlign="justify">Hello World</Text>

属性	CSS 属性	标记类别
`textAlign`	`text-align`	none

文本颜色

¥Text Color

使用 color 属性设置文本元素的颜色。

¥Use the color prop to set the color of a text element.

<Text color="red">Hello World</Text>

属性	CSS 属性	标记类别
`color`	`color`	`colors`

文本修饰

¥Text Decoration

使用 textDecoration 或 textDecor 属性设置文本元素的文本装饰。

¥Use the textDecoration or textDecor prop to set the text decoration of a text element.

<Text textDecoration="underline">Hello World</Text>

属性	CSS 属性	标记类别
`textDecor`, `textDecoration`	`text-decoration`	none

文本修饰颜色

¥Text Decoration Color

使用 textDecorationColor 属性设置文本元素的文本装饰颜色。

¥Use the textDecorationColor prop to set the text decoration color of a text element.

<Text textDecoration="underline" textDecorationColor="red">
  Hello World
</Text>

属性	CSS 属性	标记类别
`textDecorationColor`	`text-decoration-color`	`colors`

文本修饰样式

¥Text Decoration Style

使用 textDecorationStyle 属性设置文本元素的文本装饰样式。

¥Use the textDecorationStyle prop to set the text decoration style of a text element.

<Text textDecoration="underline" textDecorationStyle="dashed">
  Hello World
</Text>

属性	CSS 属性	标记类别
`textDecorationStyle`	`text-decoration-style`	none

文本修饰粗细

¥Text Decoration Thickness

使用 textDecorationThickness 属性设置文本元素的文本装饰粗细。

¥Use the textDecorationThickness prop to set the text decoration thickness of a text element.

<Text textDecoration="underline" textDecorationThickness="1px">
  Hello World
</Text>

属性	CSS 属性	标记类别
`textDecorationThickness`	`text-decoration-thickness`	none

文本下划线偏移

¥Text Underline Offset

使用 textUnderlineOffset 属性设置文本元素的文本下划线偏移量。

¥Use the textUnderlineOffset prop to set the text underline offset of a text element.

<Text textDecoration="underline" textUnderlineOffset="1px">
  Hello World
</Text>

属性	CSS 属性	标记类别
`textUnderlineOffset`	`text-underline-offset`	none

文本变换

¥Text Transform

使用 textTransform 属性设置文本元素的文本变换。

¥Use the textTransform prop to set the text transform of a text element.

<Text textTransform="uppercase">Hello World</Text>

属性	CSS 属性	标记类别
`textTransform`	`text-transform`	none

文本溢出

¥Text Overflow

使用 textOverflow 属性设置文本元素的文本溢出。

¥Use the textOverflow prop to set the text overflow of a text element.

<Text textOverflow="ellipsis">Hello World</Text>

属性	CSS 属性	标记类别
`textOverflow`	`text-overflow`	none

文本阴影

¥Text Shadow

使用 textShadow 属性设置文本元素的文本阴影。

¥Use the textShadow prop to set the text shadow of a text element.

<Text textShadow="0 0 1px red">Hello World</Text>

属性	CSS 属性	标记类别
`textShadow`	`text-shadow`	`shadows`

文本缩进

¥Text Indent

使用 textIndent 属性设置文本元素的文本缩进。

¥Use the textIndent prop to set the text indent of a text element.

// hardcoded values
<Text textIndent="1rem">Hello World</Text>

// token values
<Text textIndent="3">Hello World</Text>

属性	CSS 属性	标记类别
`textIndent`	`text-indent`	`spacing`

垂直对齐

¥Vertical Align

使用 verticalAlign 属性设置文本元素的垂直对齐方式。

¥Use the verticalAlign prop to set the vertical alignment of a text element.

<Text verticalAlign="top">Hello World</Text>

属性	CSS 属性	标记类别
`verticalAlign`	`vertical-align`	none

空白

¥White Space

使用 whiteSpace 属性设置文本元素的空白。

¥Use the whiteSpace prop to set the white space of a text element.

<Text whiteSpace="nowrap">Hello World</Text>

属性	CSS 属性	标记类别
`whiteSpace`	`white-space`	none

分词

¥Word Break

使用 wordBreak 属性设置文本溢出框时是否显示换行符。

¥Use the wordBreak prop to set whether line breaks appear wherever the text would otherwise overflow its content box.

<Text wordBreak="break-all">Hello World</Text>

属性	CSS 属性	标记类别
`wordBreak`	`word-break`	none

连字符

¥Hyphens

使用 hyphens 属性设置文本中是否使用连字符。

¥Use the hyphens prop to set whether hyphens are used in the text.

<Text hyphens="auto">Hello World</Text>

属性	CSS 属性	标记类别
`hyphens`	`hyphens`	none

转换

概述

排版

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}字体系列

字体系列