# 文本

基本文本原语。

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

## [API 参考](#api-参考)

该组件基于 `span` 元素，支持 [常见的边距属性](/themes/docs/overview/layout#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 |

## [示例](#示例)

### [作为其他元素](#作为其他元素)

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

```jsx
<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` 属性控制文本大小。该属性还提供正确的行高和修正的字距——随着文本大小的增加，相对行高和字距会减小。

```jsx
<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 设计为可以良好适用于长格式内容。

```jsx
<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 设计为可以良好适用于用户界面标签。

```jsx
<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` 属性设置文本权重。

```jsx
<Text weight="regular" as="div">

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

</Text>



<Text weight="medium" as="div">

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

</Text>



<Text weight="bold" as="div">

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

</Text>
```

### [对齐](#对齐)

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

```jsx
<Text align="left" as="div">左对齐</Text>

<Text align="center" as="div">居中对齐</Text>

<Text align="right" as="div">右对齐</Text>
```

### [修剪](#修剪)

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

该属性的工作方式与即将推出的 [半行距控制](https://www.w3.org/TR/css-inline-3/#leading-trim) 规范相似，但在底层使用了常见的 [负边距变通法](https://seek-oss.github.io/capsize/) 以支持跨浏览器兼容性。

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

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

```jsx
<Flex direction="column" gap="3">
  <Box
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
    p="4"
  >
    <Heading mb="1" size="3">
      无修剪
    </Heading>

    <Text>
      排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。
    </Text>
  </Box>

  <Box
    p="4"
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
  >
    <Heading mb="1" size="3" trim="start">
      有修剪
    </Heading>

    <Text trim="end">
      排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。
    </Text>
  </Box>
</Flex>
```

默认的修剪值配置为 Radix 主题使用的系统字体栈。如果您使用自定义字体，可以使用相应的 CSS 变量 [调整](/themes/docs/theme/typography#customization) 修剪值。

```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` 属性在文本超出其容器时用省略号截断文本。

```jsx
<Flex maxWidth="300px">
  <Text truncate>
    排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。
  </Text>
</Flex>
```

### [包裹](#包裹)

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

```jsx
<Flex maxWidth="270px">
  <Text wrap="nowrap">
    排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。
  </Text>
</Flex>
```

```jsx
<Flex maxWidth="270px">
  <Text wrap="balance">
    排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。
  </Text>
</Flex>
```

```jsx
<Flex maxWidth="270px">
  <Text wrap="pretty">
    排版的目标是将字体大小、行高和行宽以比例的方式关联起来，最大限度地提升美感，使阅读更加轻松和愉快。
  </Text>
</Flex>
```

`text-wrap: pretty` 是一个实验性值，<!-- --> [在所有浏览器中尚不支持](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#browser_compatibility)。 然而，对于支持它的浏览器，它可以被视为一种渐进增强。

### [颜色](#颜色)

使用 `color` 属性分配特定的 [颜色](/themes/docs/theme/color)。文本颜色的设计旨在在常见的背景色上实现至少 Lc 60 APCA 对比度。

```jsx
<Flex direction="column">
  <Text color="indigo">敏捷的棕色狐狸跳过懒狗。</Text>

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

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

  <Text color="crimson">敏捷的棕色狐狸跳过懒狗。</Text>
</Flex>
```

### [高对比度](#高对比度)

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

```jsx
<Flex direction="column">
  <Text color="gray">敏捷的棕色狐狸跳过懒狗。</Text>

  <Text color="gray" highContrast>
    敏捷的棕色狐狸跳过懒狗。
  </Text>
</Flex>
```

### [带格式化](#带格式化)

将 `Text` 与格式化组件组合以增加内容的强调和结构。

```jsx
<Text as="p">
  看，这么有用的 <Link href="#">链接</Link>、一个 <Em>斜体强调</Em>、一段计算机 <Code>代码</Code>
  ，甚至在文本中还有一个热键组合 <Kbd>⇧⌘A</Kbd>。
</Text>
```

### [与表单控件一起使用](#与表单控件一起使用)

将 `Text` 与表单控件如 [`Checkbox`](/themes/docs/components/checkbox)、[`RadioGroup`](/themes/docs/components/radio-group) 或 [`Switch`](/themes/docs/components/switch) 组合时，控件会自动与第一行文本居中对齐，即使文本是多行的。

```jsx
<Box maxWidth="300px">
  <Text as="label" size="3">
    <Flex gap="2">
      <Checkbox defaultChecked /> 我理解这些文件是保密的，不能与第三方分享。
    </Flex>
  </Text>
</Box>
```

<!--$-->

<!--/$-->