文档演练博客

文本

基础文本基础组件。

View source Report an issue View in Playground

The quick brown fox jumps over the lazy dog.

<Text>The quick brown fox jumps over the lazy dog.</Text>

API 参考

¥API Reference

此组件基于 span 元素并支持常用边距属性。

¥This component is based on the span element and supports common margin props.

Prop	Type	Default
`as`	`"span" \| "div" \| "label" \| "p"`	`"span"`
`asChild`	`boolean`	No default value
`size`	`Responsive<enum>`	No default value
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	No default value
`align`	`Responsive<"left" \| "center" \| "right">`	No default value
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	No default value
`truncate`	`boolean`	No default value
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

示例

¥Examples

作为其他元素

¥As another element

使用 as 属性将文本渲染为 p、label、div 或 span。此属性纯粹是语义性的，不会改变视觉外观。

¥Use the as prop to render text as a p, label, div or span. This prop is purely semantic and does not alter visual appearance.

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

<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

使用 size 属性控制文本大小。此属性还提供正确的行高和校正的字母间距 - 随着文本大小的增加，相对行高和字母间距会减小。

¥Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

<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 号尺寸设计用于长篇内容。

¥Sizes 2–4 are designed to work well for long-form content.

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 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 标签。

¥Sizes 1–3 are designed to work well for UI labels.

Get startedStart your next project in minutes

<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

使用 weight 属性设置文本粗细。

¥Use the weight prop to set the text weight.

The quick brown fox jumps over the lazy dog.

<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

使用 align 属性设置文本对齐方式。

¥Use the align prop to set text alignment.

Left-aligned

Center-aligned

Right-aligned

<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

使用 trim 属性修剪文本框开头、结尾或两侧的前导空格。

¥Use the trim prop to trim the leading space at the start, end, or both sides of the text box.

该 prop 的工作原理与即将发布的半行距控件规范类似，但底层使用了通用的负边距解决方法以实现跨浏览器支持。

¥The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.

Without trimWith 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>

在卡片或其他“盒状”组件中调整垂直间距时，修剪行距非常有用。否则，顶部和底部的内边距看起来会比侧面的大。

¥Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.

Without trim

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.

With trim

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.

<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 Themes 使用的系统字体堆栈配置的。如果你使用自定义字体，可以使用相应的 CSS 变量对修剪值进行 adjust 处理。

¥The default trim values are configured for the system font stack that’s used by Radix Themes. If you are using custom fonts, you can adjust the trim values using the corresponding CSS variables.

.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

当文本溢出容器时，使用 truncate 属性用省略号截断文本。

¥Use the truncate prop to truncate text with an ellipsis when it overflows its container.

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.

<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

使用 wrap 属性控制文本换行。

¥Use the wrap prop to control text wrapping.

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.

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

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.

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

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.

<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 is an experimental value that is not yet supported in all browsers. However, it can be treated as a progressive enhancement for browsers that do support it.

颜色

¥Color

使用 color 属性指定特定的 color。文本颜色设计为与常见背景颜色至少达到 Lc 60 APCA 对比度。

¥Use the color prop to assign a specific color. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

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

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

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

使用格式化

¥With formatting

使用格式化组件组合 Text，以增强内容的强调和结构。

¥Compose Text with formatting components to add emphasis and structure to content.

Look, such a helpful link, an italic emphasis, a piece of computer code, and even a hotkey combination ⇧⌘A within the text.

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

使用表单控件

¥With form controls

将 Text 与表单控件（例如 Checkbox、RadioGroup 或 Switch）组合，即使文本是多行的，也会自动将控件与第一行文本居中。

¥Composing Text with a form control like Checkbox, RadioGroup, or Switch automatically centers the control with the first line of text, even when the text is multi-line.

I understand that these documents are confidential and cannot be shared with a third party.

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

Previous部分

Next标题

概览

主题

布局

排版

组件

实用工具

文本

Without trim

With trim