Vue3使用Element Plus单个Tag标签文字过长自动换行代码实现

啦啦啦啦

发布于 2024-08-09 13:24:59

88300

代码可运行

文章被收录于专栏：啦啦啦啦前端啦啦啦啦前端

运行总次数：0

代码可运行

1 需求引入

直接上图，原先程序显示效果是这样：

由上图可见，element plus的tag标签组件里面内容过长时，把页面都撑开了，不能自动换行，我的tag标签代码原先是这样写的

<div style="width: 100%; margin-bottom: 5px">
	<el-tag v-if="uploadMessage.successMessage.length > 0" :type="'success'" 	effect="plain">
		{{ uploadMessage.successMessage }}
	</el-tag>
</div>

2 解决需求，代码实现

先看解决效果图：

如何解决的呢，只要我们再单独写一下css的样式就ok了，看下面的css样式代码：

.el-tag {
    white-space: normal;
    height: auto;
    padding: 2px;
    display: inline-block;
}

好了，直接加上上面这段css代码就ok了。

3 小结

我当时用这个标签是显示错误信息的，后来发现element的Alert组件用于现实错误信息才比较合适，因为那个有个关闭的按钮，既然已经写了，就记录一下吧~ 希望对看文章的你也有些用吧 ~ >_< ~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-08-07，如有侵权请联系 cloudcommunity@tencent.com 删除

程序

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Vue3使用Element Plus单个Tag标签文字过长自动换行代码实现

Vue3使用Element Plus单个Tag标签文字过长自动换行代码实现

1 需求引入

2 解决需求，代码实现

3 小结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐