vue element plus Text

文本的常见操作

基础用法#

type 属性来选择 Text 的类型。

DefaultPrimarySuccessInfoWarningDanger

尺寸#

使用 size 属性配置尺寸,可选的尺寸大小有: large, defaultsmall

LargeDefaultSmall

省略#

通过 truncated 属性,在文本超过视图或最大宽度设置时展示省略符。 通过 line-clamp 属性控制多行的样式

Self element set width 100px

Squeezed by parent element

The -webkit-line-clamp CSS property

allows limiting of the contents of

a block to the specified number of lines.

覆盖#

使用属性 tag 覆盖元素

span

This is a paragraph.

Bold

Italic

This is subscript

This is superscript

Inserted

Deleted

Marked

混合使用#

混合使用 Text 组件

Element-Plus

Rate

This is text mixed icon and component Button

API#

Attributes#

属性名 描述 类型 默认值
type 类型 enum ---
size 大小 enum default
truncated 显示省略号 boolean false
line-clamp 2.4.0 最大行数 string / number -
tag 自定义元素标签 string span

Slots#

名称 详情
default 默认内容

源代码#

组件文档

贡献者

相关推荐
闲云一鹤17 小时前
nginx 快速入门教程 - 写给前端的你
前端·nginx·前端工程化
QCY18 小时前
「完全理解」1 分钟实现自己的 Coding Agent
前端·agent·claude
一拳不是超人18 小时前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
anyup18 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
雮尘19 小时前
如何在非 Claude IDE (TARE、 Cursor、Antigravity 等)下使用 Agent Skills
前端·agent·ai编程
icebreaker19 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker19 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
wuhen_n19 小时前
代码生成:从AST到render函数
前端·javascript·vue.js
Lee川19 小时前
从异步迷雾到优雅流程:JavaScript异步编程与内存管理的现代化之旅
javascript·面试
喝咖啡的女孩19 小时前
浏览器前端指南
前端