文本

基本文本原语。

View source Report an issue View in Playground

敏捷的棕色狐狸跳过懒狗。

<Text>敏捷的棕色狐狸跳过懒狗。</Text>

API 参考

该组件基于 span 元素，支持常见的边距属性。

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

示例

作为其他元素

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

这是一个段落元素。

这是一个标签元素。

这是一个 div 元素。

这是一个 span 元素。

<Text as="p">这是一个 <Strong>段落</Strong> 元素。</Text>
<Text as="label">这是一个 <Strong>标签</Strong> 元素。</Text>
<Text as="div">这是一个 <Strong>div</Strong> 元素。</Text>
<Text as="span">这是一个 <Strong>span</Strong> 元素。</Text>

大小

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

敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。敏捷的棕色狐狸跳过懒狗。

<Flex direction="column" gap="3">
	<Text size="1">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="2">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="3">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="4">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="5">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="6">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="7">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="8">敏捷的棕色狐狸跳过懒狗。</Text>
	<Text size="9">敏捷的棕色狐狸跳过懒狗。</Text>
</Flex>

大小 2–4 设计为可以良好适用于长格式内容。

排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。问题是：什么比例能够给我们最好的结果？黄金比例常常在自然界中被观察到，当美和实用相交时；或许我们可以使用这种“神圣”的比例来增强我们的排版特性。

<Text as="p" mb="5" size="4">
  排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。问题是：什么比例能够给我们最好的结果？黄金比例常常在自然界中被观察到，当美和实用相交时；或许我们可以使用这种“神圣”的比例来增强我们的排版特性。
</Text>

<Text as="p" mb="5" size="3">
  排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。问题是：什么比例能够给我们最好的结果？黄金比例常常在自然界中被观察到，当美和实用相交时；或许我们可以使用这种“神圣”的比例来增强我们的排版特性。
</Text>

<Text as="p" size="2" color="gray">
  排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。问题是：什么比例能够给我们最好的结果？黄金比例常常在自然界中被观察到，当美和实用相交时；或许我们可以使用这种“神圣”的比例来增强我们的排版特性。
</Text>

大小 1–3 设计为可以良好适用于用户界面标签。

开始几分钟内开始您的下一个项目

<Grid align="center" columns="2" gap="5" p="3">
	<Flex direction="column">
		<Text size="3" weight="bold">
			开始
		</Text>
		<Text color="gray" size="2">
			几分钟内开始您的下一个项目
		</Text>
	</Flex>

	<Flex direction="column">
		<Text size="2" weight="bold">
			开始
		</Text>
		<Text color="gray" size="2">
			几分钟内开始您的下一个项目
		</Text>
	</Flex>

	<Flex direction="column">
		<Text size="2" weight="bold">
			开始
		</Text>
		<Text color="gray" size="1">
			几分钟内开始您的下一个项目
		</Text>
	</Flex>

	<Flex direction="column">
		<Text size="1" weight="bold">
			开始
		</Text>
		<Text color="gray" size="1">
			几分钟内开始您的下一个项目
		</Text>
	</Flex>
</Grid>

权重

使用 weight 属性设置文本权重。

敏捷的棕色狐狸跳过懒狗。

<Text weight="regular" as="div">
  敏捷的棕色狐狸跳过懒狗。
</Text>

<Text weight="medium" as="div">
  敏捷的棕色狐狸跳过懒狗。
</Text>

<Text weight="bold" as="div">
  敏捷的棕色狐狸跳过懒狗。
</Text>

对齐

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

左对齐

居中对齐

右对齐

<Text align="left" as="div">左对齐</Text>
<Text align="center" as="div">居中对齐</Text>
<Text align="right" as="div">右对齐</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)",
		}}
	>
		无修剪
	</Text>
	<Text
		trim="both"
		style={{
			background: "var(--gray-a2)",
			borderTop: "1px dashed var(--gray-a7)",
			borderBottom: "1px dashed var(--gray-a7)",
		}}
	>
		有修剪
	</Text>
</Flex>

修剪前导空格在调整卡片或其他“盒子”组件的垂直间距时非常有用。否则，填充在上下的看起来比在两侧的要大。

无修剪