排版

字体家族

使用fontFamily 属性设置文本元素的字体家族。

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

属性	CSS 属性	令牌类别
fontFamily	font-family	fonts

字体大小

使用 fontSize 属性设置文本元素的字体大小。

// hardcoded values
<Text fontSize="12px">Hello World</Text>
<Text fontSize="10rem">Hello World</Text>

// token values
<Text fontSize="xs">Hello World</Text>
<Text fontSize="4xl">Hello World</Text>
<Text fontSize="5xl">Hello World</Text>

属性	CSS 属性	令牌类别
fontSize	font-size	fonts

文本样式

使用 textStyle 属性一次性应用字体大小、行高和字间距组合。

<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

字体样式

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

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

属性	CSS 属性	令牌类别
fontStyle	font-style	none

字体粗细

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

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

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

属性	CSS 属性	令牌类别
fontWeight	font-weight	fontWeights

字体数字变体

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

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

属性	CSS 属性	令牌类别
fontVariantNumeric	font-variant-numeric	none

字间距

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

// 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

截断

使用 truncate 属性截断文本。

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

属性	CSS 属性	令牌类别
truncate	text-overflow	none

行数限制

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

<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

行高

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

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

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

属性	CSS 属性	令牌类别
lineHeight	line-height	lineHeights

文本对齐

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

<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

文本颜色

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

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

属性	CSS 属性	令牌类别
color	color	colors

文本装饰

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

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

属性	CSS 属性	令牌类别
textDecor, textDecoration	text-decoration	none

文本装饰颜色

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

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

属性	CSS 属性	令牌类别
textDecorationColor	text-decoration-color	colors

文本装饰样式

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

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

属性	CSS 属性	令牌类别
textDecorationStyle	text-decoration-style	none

文本装饰粗细

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

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

属性	CSS 属性	令牌类别
textDecorationThickness	text-decoration-thickness	none

文本下划线偏移

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

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

属性	CSS 属性	令牌类别
textUnderlineOffset	text-underline-offset	none

文本转换

使用 textTransform 属性设置文本元素的转换方式。

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

属性	CSS 属性	令牌类别
textTransform	text-transform	none

文本溢出

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

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

属性	CSS 属性	令牌类别
textOverflow	text-overflow	none

文本阴影

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

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

属性	CSS 属性	令牌类别
textShadow	text-shadow	shadows

文本缩进

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

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

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

属性	CSS 属性	令牌类别
textIndent	text-indent	spacing

垂直对齐

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

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

属性	CSS 属性	令牌类别
verticalAlign	vertical-align	none

空白

使用 whiteSpace 属性设置文本元素的空白处理方式。

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

属性	CSS 属性	令牌类别
whiteSpace	white-space	none

单词换行

使用 wordBreak 属性设置当文本超出其内容框时是否允许换行。

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

属性	CSS 属性	令牌类别
wordBreak	word-break	none

连字符

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

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

属性	CSS 属性	令牌类别
hyphens	hyphens	none