基础文本图元。
<Text>The quick brown fox jumps over the lazy dog.</Text>
此组件基于 span 元素，并支持常用的 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
as | "span" | "div" | "label" | "p" | "span" |
asChild | 布尔值 | 无默认值 |
size | 响应式<枚举> | 无默认值 |
weight | 响应式<"light" | "regular" | "medium" | "bold"> | 无默认值 |
align | 响应式<"left" | "center" | "right"> | 无默认值 |
trim | 响应式<"normal" | "start" | "end" | "both"> | 无默认值 |
truncate | 布尔值 | 无默认值 |
wrap | 响应式<"wrap" | "nowrap" | "pretty" | "balance"> | 无默认值 |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
使用 as 属性将文本渲染为 p、label、div 或 span。此属性纯粹是语义化的，不会改变视觉外观。
这是一个段落 (paragraph) 元素。
<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 属性修剪文本框开头、结尾或两侧的前导空格。
此属性的工作方式类似于即将推出的 half-leading control 规范，但底层使用了常见的 negative margin workaround 解决方法，以实现跨浏览器支持。
<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>
在调整卡片或其他“盒状”组件中的垂直间距时，修剪前导空格非常有用。否则，顶部和底部的内边距 (padding) 看起来比侧面更大。
<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>
默认的 trim 值是为 Radix Themes 使用的系统字体堆栈配置的。如果您使用自定义字体，则可以使用相应的 CSS 变量调整 trim 值。
.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 与格式化组件组合使用，以增强内容的重点和结构。
看，这是一个有用的 链接 (link)，一个 斜体 (italic) 强调，一段计算机 code，甚至一个热键组合 ⇧⌘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>