element-ui中label过长换行与el-input等高

Scarlett_Hao

已于 2022-05-11 16:36:27 修改

阅读量6.3k

点赞数 8

文章标签： elementui vue.js javascript

于 2022-05-11 15:54:16 首次发布

本文链接：https://blog.csdn.net/weixin_57541715/article/details/124711844

版权

1. template中设置label

:label = "'....\n....'"
<!--
    如：
    <el-form-item :label = "'税收居民国(地区)2\n(如有请填写):'"  class="foldLabel">
        <el-input type="text"></el-input>
    </el-form-item>
-->

注意：双引号中需要添加单引号将内容包裹，然后在换行处添加'\n'

2.设置css样式将label文字与input等高

<style scoped>
    ::v-deep.el-form-item.foldLabel .el-form-item__label {
        white-space: pre-line; /*换行显示*/
        height: 32px;/*设置lable高度，与input高度一样*/
        line-height: 16px!important;/*设置行高为label高度的一半（有n行就是label高度的1/n）*/
    }
</style>