Text
text文本 · size/tone/weight + 单行省略/多行截断 + as 多态(纯皮肤·零依赖·RSC)
用法
语义色调
tone 走语义 token，明暗主题自动适配。
默认正文
辅助说明
强调文本
危险提示
tsx
<Text>默认正文</Text>
<Text tone="muted">辅助说明</Text>
<Text tone="primary">强调文本</Text>
<Text tone="danger">危险提示</Text>字号阶梯
size 提供 xs/sm/base/lg/xl 五档。
xs 最小辅助
sm 次要
base 正文基准
lg 偏大正文
xl 引导语
tsx
<Text size="xs">xs 最小辅助</Text>
<Text size="sm">sm 次要</Text>
<Text size="base">base 正文基准</Text>
<Text size="lg">lg 偏大正文</Text>
<Text size="xl">xl 引导语</Text>字重
weight 提供 normal/medium/semibold/bold。
常规
中等
半粗
粗体
tsx
<Text weight="normal">常规</Text>
<Text weight="medium">中等</Text>
<Text weight="semibold">半粗</Text>
<Text weight="bold">粗体</Text>单行省略号
truncate 在容器收窄时单行截断并显示省略号。
瑚琏设计系统的 Text 组件支持单行省略号与多行截断，这段文本足够长以触发截断效果观察省略号位置。
tsx
<div className="max-w-xs">
<Text truncate>{longLine}</Text>
</div>多行截断
lineClamp 限制最多 n 行后省略，优先于 truncate。
tsx
<div className="max-w-xs">
<Text tone="muted" lineClamp={2}>{longText}</Text>
</div>何时用
正文、辅助说明、行内文本——需要统一字号/语义色调/字重并支持单行省略或多行截断时用 Text。标题层级（h1–h6 语义 + 标题尺寸）用 Heading；整段富文本/Markdown 排版用 Prose。
导入
ts
import { Text } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| as | ElementType | "p" | 渲染的元素标签 |
| size | "xs" | "sm" | "base" | "lg" | "xl" | "base" | 字号 |
| tone | "default" | "muted" | "primary" | "danger" | "default" | 语义色调（明暗自适配） |
| weight | "normal" | "medium" | "semibold" | "bold" | "normal" | 字重 |
| truncate | boolean | false | 单行省略号截断 |
| lineClamp | number | — | 多行截断（最多 n 行后省略号）；设置后优先于 truncate |
继承 HTMLAttributes<HTMLElement>（已 Omit color，色调走 tone）。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 文本内容 |
禁忌 / 坑
暂无已知坑。truncate（单行省略）依赖容器有确定宽度才会触发；lineClamp 与 truncate 同设时 lineClamp 优先。候选坑列表（bff-refresh/cjk-tokenizer/menubar/pdf/regex/sliding-pill/swiftui 各项）均与本纯皮肤文本组件无关，已剔除。
相关
Heading · Prose · Markdown · AuroraText · AnimatedShinyText · AnimatedGradientText
Playground
瑚琏 Text 多态文本原语
<Text>瑚琏 Text 多态文本原语</Text>