基础文本组件。
此组件基于 span 元素，并支持 常见的边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
as | "span" | "div" | "label" | "p" | "span" |
asChild | 布尔值 | 无默认值 |
size | Responsive<enum> | 无默认值 |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | 无默认值 |
align | Responsive<"left" | "center" | "right"> | 无默认值 |
trim | Responsive<"normal" | "start" | "end" | "both"> | 无默认值 |
truncate | 布尔值 | 无默认值 |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | 无默认值 |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
使用 as 属性将文本呈现为 p、label、div 或 span。此属性纯粹是语义上的，不会改变视觉外观。
这是一个 段落 元素。
<Text as="p">This is a <Strong>paragraph</Strong> element.</Text>
<Text as="label">This is a <Strong>label</Strong> element.</Text>
<Text as="div">This is a <Strong>div</Strong> element.</Text>
<Text as="span">This is a <Strong>span</Strong> element.</Text>
使用 size 属性控制文本大小。此属性还提供正确的行高和校正的字间距——随着文本大小的增加，相对行高和字间距会减小。
<Flex direction="column" gap="3">
<Text size="1">The quick brown fox jumps over the lazy dog.</Text>
<Text size="2">The quick brown fox jumps over the lazy dog.</Text>
<Text size="3">The quick brown fox jumps over the lazy dog.</Text>
<Text size="4">The quick brown fox jumps over the lazy dog.</Text>
<Text size="5">The quick brown fox jumps over the lazy dog.</Text>
<Text size="6">The quick brown fox jumps over the lazy dog.</Text>
<Text size="7">The quick brown fox jumps over the lazy dog.</Text>
<Text size="8">The quick brown fox jumps over the lazy dog.</Text>
<Text size="9">The quick brown fox jumps over the lazy dog.</Text>
</Flex>
尺寸 2-4 旨在适用于长篇内容。
排版的目标是以一种成比例的方式关联字体大小、行高和行宽，从而最大限度地提高美观性，并使阅读更容易、更愉快。问题是：什么比例才能给我们带来最佳效果？黄金分割通常在自然界中被观察到，在自然界中，美观性和实用性相互交织；也许我们可以利用这种“神圣”的比例来增强我们排版中的这些属性。
排版的目标是以一种成比例的方式关联字体大小、行高和行宽，从而最大限度地提高美观性，并使阅读更容易、更愉快。问题是：什么比例才能给我们带来最佳效果？黄金分割通常在自然界中被观察到，在自然界中，美观性和实用性相互交织；也许我们可以利用这种“神圣”的比例来增强我们排版中的这些属性。
排版的目标是以一种成比例的方式关联字体大小、行高和行宽，从而最大限度地提高美观性，并使阅读更容易、更愉快。问题是：什么比例才能给我们带来最佳效果？黄金分割通常在自然界中被观察到，在自然界中，美观性和实用性相互交织；也许我们可以利用这种“神圣”的比例来增强我们排版中的这些属性。
<Text as="p" mb="5" size="4">
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>
<Text as="p" mb="5" size="3">
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>
<Text as="p" size="2" color="gray">
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>
尺寸 1-3 旨在适用于 UI 标签。
<Grid align="center" columns="2" gap="5" p="3">
<Flex direction="column">
<Text size="3" weight="bold">
Get started
</Text>
<Text color="gray" size="2">
Start your next project in minutes
</Text>
</Flex>
<Flex direction="column">
<Text size="2" weight="bold">
Get started
</Text>
<Text color="gray" size="2">
Start your next project in minutes
</Text>
</Flex>
<Flex direction="column">
<Text size="2" weight="bold">
Get started
</Text>
<Text color="gray" size="1">
Start your next project in minutes
</Text>
</Flex>
<Flex direction="column">
<Text size="1" weight="bold">
Get started
</Text>
<Text color="gray" size="1">
Start your next project in minutes
</Text>
</Flex>
</Grid>
使用 weight 属性设置文本粗细。
<Text weight="regular" as="div">
The quick brown fox jumps over the lazy dog.
</Text>
<Text weight="medium" as="div">
The quick brown fox jumps over the lazy dog.
</Text>
<Text weight="bold" as="div">
The quick brown fox jumps over the lazy dog.
</Text>
使用 align 属性设置文本对齐方式。
<Text align="left" as="div">Left-aligned</Text>
<Text align="center" as="div">Center-aligned</Text>
<Text align="right" as="div">Right-aligned</Text>
使用 trim 属性修剪文本框开头、结尾或两侧的前导空格。
此属性的工作原理类似于即将推出的 半前导控制 规范，但在后台使用了常见的 负边距解决方法 以实现跨浏览器支持。
<Flex direction="column" gap="3">
<Text
trim="normal"
style={{
background: 'var(--gray-a2)',
borderTop: '1px dashed var(--gray-a7)',
borderBottom: '1px dashed var(--gray-a7)',
}}
>
Without trim
</Text>
<Text
trim="both"
style={{
background: 'var(--gray-a2)',
borderTop: '1px dashed var(--gray-a7)',
borderBottom: '1px dashed var(--gray-a7)',
}}
>
With trim
</Text>
</Flex>
在卡片或其他“盒状”组件中微调垂直间距时，修剪前导空格很有用。否则，顶部和底部的填充看起来会比侧面更大。
<Flex direction="column" gap="3">
<Box
style={{
background: 'var(--gray-a2)',
border: '1px dashed var(--gray-a7)',
}}
p="4"
>
<Heading mb="1" size="3">
Without trim
</Heading>
<Text>
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Box>
<Box
p="4"
style={{
background: 'var(--gray-a2)',
border: '1px dashed var(--gray-a7)',
}}
>
<Heading mb="1" size="3" trim="start">
With trim
</Heading>
<Text trim="end">
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Box>
</Flex>
默认修剪值是为 Radix 主题使用的系统字体栈配置的。如果您使用自定义字体，您可以 调整 使用相应 CSS 变量的修剪值。
.radix-themes {
--default-leading-trim-start: 0.42em;
--default-leading-trim-end: 0.36em;
--heading-leading-trim-start: 0.42em;
--heading-leading-trim-end: 0.36em;
}
使用 truncate 属性在文本溢出其容器时用省略号截断文本。
<Flex maxWidth="300px">
<Text truncate>
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Flex>
使用 wrap 属性控制文本换行。
<Flex maxWidth="270px">
<Text wrap="nowrap">
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Flex>
<Flex maxWidth="270px">
<Text wrap="balance">
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Flex>
<Flex maxWidth="270px">
<Text wrap="pretty">
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Flex>
text-wrap: pretty 是一个实验性值， 尚未在所有浏览器中得到支持。但是，它可以被视为支持它的浏览器的渐进式增强。
使用 color 属性分配特定的 颜色。文本颜色旨在在常见背景颜色上实现至少 Lc 60 APCA 对比度。
<Flex direction="column">
<Text color="indigo">The quick brown fox jumps over the lazy dog.</Text>
<Text color="cyan">The quick brown fox jumps over the lazy dog.</Text>
<Text color="orange">The quick brown fox jumps over the lazy dog.</Text>
<Text color="crimson">The quick brown fox jumps over the lazy dog.</Text>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Flex direction="column">
<Text color="gray">The quick brown fox jumps over the lazy dog.</Text>
<Text color="gray" highContrast>
The quick brown fox jumps over the lazy dog.
</Text>
</Flex>
使用格式化组件组合 Text 以向内容添加强调和结构。
看，一个如此有用的 链接、一个 斜体强调、一段计算机 代码，甚至一个热键组合 ⇧⌘A 在文本中。
<Text as="p">
Look, such a helpful <Link href="#">link</Link>, an <Em>italic emphasis</Em>,
a piece of computer <Code>code</Code>, and even a hotkey combination{' '}
<Kbd>⇧⌘A</Kbd> within the text.
</Text>
将 Text 与表单控件（如 Checkbox、RadioGroup 或 Switch）组合使用会自动将控件与文本的第一行居中，即使文本是多行的。
<Box maxWidth="300px">
<Text as="label" size="3">
<Flex gap="2">
<Checkbox defaultChecked /> I understand that these documents are
confidential and cannot be shared with a third party.
</Flex>
</Text>
</Box>