element-plus的el-text组件(文本组件)的介绍和使用

el-text(适合文本操作的组件)

  1. 设置文本type,如default,primary,success,info,warning,danger
  2. 超出容器尺寸自动省略,tuncated属性
  3. 设置size属性控制文本大小,有large,default,small
  4. 设置tag属性,值为html5标签名,其内容会被该标签覆盖
<script setup lang="ts">
import { ref } from 'vue';</script><template><el-container :direction="vertical"><el-header height=""><!-- Header content --></el-header><el-container :direction="horizontal"><el-aside width="200px"><!-- Aside content --></el-aside><el-container :direction="vertical"><el-main height=""><el-text type="primary" size="small">small primary</el-text><el-text type="primary" >primary</el-text><el-text type="default" size="large">large primary</el-text><el-text type="default" truncated style="width: 100px;">truncate test,123456789ABCDEFGHIJKLMNOPQRSTasdasd</el-text><br/><el-text type="default" truncated tag="h1">tag test,123456789ABCDEFGHIJKLMNOPQRSTasdasd</el-text><el-text type="default" truncated tag="p">tag test,123456789ABCDEFGHIJKLMNOPQRSTasdasd</el-text></el-main><el-footer height=""><!-- Footer content --></el-footer></el-container></el-container></el-container></template><style scoped></style>

在这里插入图片描述
https://element-plus.org/zh-CN/component/text.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24804.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nagios的安装和使用

*实验* *nagios安装和使用* Nagios 是一个监视系统运行状态和网络信息的监视系统。Nagios 能监视所指定的本地或远程主机以及服务&#xff0c;同时提供异常通知功能等. Nagios 可运行在 Linux/Unix 平台之上&#xff0c;同时提供一个可选的基于浏览器的 WEB 界面以方便系统管…

【创作活动】面对层出不穷的AI大模型产品我们应该怎么选择?

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Vue CLI 4与项目构建实战指南

title: Vue CLI 4与项目构建实战指南 date: 2024/6/9 updated: 2024/6/9 excerpt: 这篇文章介绍了如何使用Vue CLI优化项目构建配置&#xff0c;提高开发效率&#xff0c;涉及配置管理、项目部署策略、插件系统定制以及Webpack和TypeScript的深度集成技巧。 categories: 前端…

五、身份与访问管理—身份管理和访问控制管理(CISSP)

目录 1.身份管理 1.1 目录技术 1.2 单点登录 1.2.1 Kerberos认证 1.2.2 SESAME认证 1.2.3 KryptoKnight认证 1.3 联合身份管理 1.3.1 SAML安全断言标记语言 1.3.2 标记语言 1.3.3 OpenID 1.3.4 OAuth 1.3.5 OIDC(OpenID Connect) 2.身份即服务(IDaaS) 2.1 AA…

Rocky linux 搭建DNS主从服务器+keepalived实现高可用

接上两篇文章&#xff0c;这篇文章跟上两篇没有直接关系。 第一篇&#xff1a;linux rocky 搭建DNS服务和禁止AD域控DNS&#xff0c;做到独立DNS并加域_linux 域控-CSDN博客文章浏览阅读519次&#xff0c;点赞20次&#xff0c;收藏10次。使用linux rocky 搭建DNS服务&#xff…

【个人博客搭建】(22)申请QQ开发者

这里我们要引入的一个概念是OAuth - OAuth 2.0是一个行业标准的授权协议&#xff0c;用于处理用户数据访问和分享的安全问题。它允许用户将他们对某些服务的访问权限授权给第三方应用&#xff0c;而无需分享他们的用户名和密码。以下是对OAuth 2.0的介绍&#xff1a; 基本概念 …

Nvidia/算能 +FPGA+AI大算力边缘计算盒子:中国舰船研究院

中国舰船研究院又称中国船舶重工集团公司第七研究院&#xff0c;隶属于中国船舶重工集团公司&#xff0c;是专门从事舰船研究、设计、开发的科学技术研究机构&#xff0c;是中国船舶重工集团公司的军品技术研究中心、科技开发中心&#xff1b;主要从事舰船武器装备发展战略研究…

PDF编辑与转换的终极工具智能PDF处理Acrobat Pro DC

Acrobat Pro DC 2023是一款功能全面的PDF编辑管理软件&#xff0c;支持创建、编辑、转换、签署和共享PDF文件。它具备OCR技术&#xff0c;可将扫描文档转换为可编辑文本&#xff0c;同时提供智能PDF处理技术&#xff0c;确保文件完整性和可读性。此外&#xff0c;软件还支持电子…

竞拍商城系统源码后端PHP+前端UNIAPP

下载地址&#xff1a;竞拍商城系统源码后端PHP前端UNIAPP

手把手教你入门vue+springboot开发(二)

文章目录 前言一、开发环境搭建二、创建项目三、编写代码1.插件下载2.编写代码 四、测试验证总结 前言 前面我们构建了一个查询用户信息的简单springboot后端demo&#xff0c;今天我们先搭建VSCodevue的开发环境&#xff0c;然后在这个开发环境上构建一个demo&#xff0c;连接…

肠道病原体感染定植的三个关键角色——炎症、营养与共生菌群

谷禾健康 日常生活中大部分人都可能碰到过食用了不卫生或过期变质食物以及水源后&#xff0c;出现过恶心、腹痛&#xff0c;并伴有腹泻、食欲不振、呕吐等症状&#xff1f;如果有就要当心&#xff0c;这可能是病原体感染引起的胃肠道炎症。 但是&#xff0c;即使食用了同样食物…

mysql中 redo日志(下)

大家好。上篇文章我们介绍了什么是redo日志以及redo日志的写入过程。建议没看过上篇文章的同学先看一下上一篇文章&#xff0c;今天我们继续来说一说redo日志。 一、redo日志文件 1. redo日志刷盘时机 我们知道mtr运行过程中产生的一组redo日志在mtr结束时会被复制到log buf…

从VS Code源码看清晰代码之美

VS Code的产品做的很优秀&#xff0c;其源码也质量颇高&#xff0c;清晰、整洁、富有美感。 下面是 src\vs\workbench\common\notifications.ts 文件中的两段代码&#xff0c;大家感受一下&#xff1a; get sticky(): boolean {if (this._sticky) {return true; // explicitl…

冲刺面试加油

1、HTML语义化&#xff1f; 对于开发者而言&#xff0c;语义化标签有着更好的页面结构&#xff0c;有利于代码的开发编写和后期的维护。 对于用户而言&#xff0c;当网络卡顿时有良好的页面结构&#xff0c;有利于增加用户的体验。 对于爬虫来说&#xff0c;有利于搜索引擎的…

所谓自律,就是去对抗那些廉价的快乐

所谓自律&#xff0c;就是去对抗那些廉价的快乐 以下文章来源于洞见 &#xff0c;作者洞见 导语 打败内心那只及时享乐的猴子。 董宇辉说过这样一句话&#xff1a;“廉价的快乐是直接给你想要的东西&#xff0c;高等的快乐则会给你设置重重阻碍。” 廉价的快乐&#xff0c;就…

Huggingface的Transformer库经验总结

文章目录 transformerstransformers.Trainertrain()tr_loss self.training_step(model, inputs)dagn的forward中逐步计算损失函数 transformers transformers.Trainer class Trainer:#这段代码根据训练数据集的类型和硬件环境&#xff0c;选择适当的采样器来处理数据集。def…

【免费Web系列】大家好 ,今天是Web课程的第十七天点赞收藏关注,持续更新作品 !

这是Web第一天的课程大家可以传送过去学习 http://t.csdnimg.cn/K547r SpingBoot原理 在前面十多天的课程当中&#xff0c;我们学习的都是web开发的技术使用&#xff0c;都是面向应用层面的&#xff0c;我们学会了怎么样去用。而我们今天所要学习的是web后端开发的最后一个篇…

冯喜运:6.7晚间黄金原油行情分析及操作建议

【黄金消息面分析】&#xff1a;周四(6月6日)纽市尾盘&#xff0c;现货黄金盘中报2373.15美元/盎司&#xff0c;涨18.16美元或0.77%。如果金价反弹至上周高点2364上方&#xff0c;将引发一周看涨反转。日收盘价高于该价格水平将确认突破。一旦突破得到确认&#xff0c;金价进一…

Vue3【十一】08使用toRefs和toRef

08使用toRefs和toRef toRefs()函数将person对象中的name和age属性转换为响应式引用&#xff0c;并返回一个对象&#xff0c;对象中的name和age属性都是响应式引用&#xff0c;具有响应式功能。 toRef()函数将person对象中的name属性转换为响应式引用&#xff0c;并返回一个响应…

海南聚广众达电子商务咨询有限公司正规吗?

在数字经济的浪潮下&#xff0c;海南聚广众达电子商务咨询有限公司凭借其对抖音电商领域的深刻洞察和专业服务&#xff0c;成为引领行业新风尚的佼佼者。公司不仅具备丰富的电商运营经验&#xff0c;更有一支高效、创新的团队&#xff0c;致力于为品牌商家提供全方位的电商解决…