1 需求引入
直接上图,原先程序显示效果是这样:
由上图可见,element plus的tag标签组件里面内容过长时,把页面都撑开了,不能自动换行,我的tag标签代码原先是这样写的
代码语言:javascript复制<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样式代码:
代码语言:javascript复制.el-tag {
white-space: normal;
height: auto;
padding: 2px;
display: inline-block;
}
好了,直接加上上面这段css代码就ok了。
3 小结
我当时用这个标签是显示错误信息的,后来发现element的Alert组件用于现实错误信息才比较合适,因为那个有个关闭的按钮,既然已经写了,就记录一下吧~ 希望对看文章的你也有些用吧 ~ >_< ~