Text 文字

帶語意色與尺寸的行內文字元件,並內建單行 / 多行省略。使用 Element Plus 的 el-text。

設計準則

• 要帶語意色的短文字用 el-text(狀態、標記、強調);大段落內文仍用一般 HTML 或 Tailwind 排版
• 顏色跟著語意走(success/warning/danger…),不要為視覺挑色 —— 同顏色使用順位
• 尺寸對齊 EP 元件字級(large/default/small),超過 20px 的大標題請改用 Tailwind 字級 class
• 卡片摘要、列表描述容易被長文撐開,用 truncated(單行)或 line-clamp(多行)收尾
• 語意標籤(刪除線、螢光標記、上下標)用 tag 指定,語意才正確

基本用法

用 type 帶出六種語意色:

loading

尺寸

size 提供 large / default / small,對齊 Element Plus 元件字級:

loading

文字省略

truncated 單行省略、line-clamp 指定最多顯示幾行,超出以刪節號收尾:

loading

語意標籤

用 tag 把文字渲染成不同語意的 HTML 元素(段落、加粗、刪除線、螢光標記、上下標):

loading

混合使用

文字可與圖標、評分、按鈕等元件混排:

loading

Do / Don't

✅ Do	❌ Don't
短狀態文字用 el-text 帶語意色	大段內文也硬包成一堆 el-text
卡片摘要用 truncated / line-clamp	長文把版面撐爆
顏色跟著語意	為視覺隨意挑 type
語意標籤用 tag(del/mark/sub…)	只靠顏色暗示刪除、標記

給工程師

• 常用 props:type(primary/success/info/warning/danger)、size(large/default/small)、truncated(單行省略)、line-clamp(多行省略,數字)、tag(渲染的 HTML 元素,預設 span)
• truncated / line-clamp 需要元素本身或父層有寬度限制才會生效
• 完整 API 見 Element Plus Text 文件。本站規範優先於 EP 文件中的視覺建議。