仅桌面端保证样式
Text 文本
基础文本排版组件:type 提供语义配色,size 控制字号,truncated 单行省略,tag 可指定渲染的 HTML 标签(默认 span)。渲染为 inline-flex(truncated 时变为 inline-block),可与图标等行内元素混排。
基础用法
type 决定文字颜色:default 常规色(默认)、primary / success / warning / danger 对应语义色、info 为次要灰;error 是 danger 的别名。
默认文本
主要文本
成功文本
警告文本
危险文本
次要文本
error 等同于 danger
尺寸
size 提供 large / default / small 三档字号,常与标题、正文、辅助说明的层级搭配。
大号文本
默认文本
小号文本
单行截断
truncated 开启后超出容器宽度自动省略(overflow + ellipsis);需配合固定宽度或受父容器约束使用,可再加 title 属性让悬浮可见全文。
超过容器宽度时自动单行省略的超长文本示例固定 200px 宽度的另一条长文本,同样会省略
自定义标签
tag 更换渲染元素:块级排版用 div / p,表单标注用 label 等;语义不变,仅影响 DOM 结构与默认样式。
div 渲染的块级标题
p 渲染的段落,独占一行,适合正文排版。
与图标混排
eb-text 渲染为 inline-flex 且 align-items: center,内部可与 eb-icon 等行内元素直接混排,图标颜色自动跟随文字色。
校验通过,可以提交
存在 2 项待确认的变更
该配置对所有环境生效
组合场景:详情描述排版
size 层级 + 语义色 + truncated 组合出紧凑的详情区块;与 Divider、Tag、Space 搭配即可覆盖大部分信息展示需求。
订单 A-1001
已支付
下单人
张三(销售部)
金额
9900.00
备注:客户要求本周内完成部署并安排一次线上培训。
API
Text Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 语义色(error 等同 danger) | primary | success | warning | info | danger | error | default | default |
| size | 字号 | large | default | small | default |
| truncated | 单行截断省略(渲染为 inline-block 并限制最大宽度 100%) | boolean | false |
| tag | 渲染的 HTML 标签 | string | span |
Text Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 文本内容 | — | — |