欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)方法

 更新時(shí)間：2023年09月22日 11:24:04   作者：Hyanl  
這篇文章主要給大家介紹了el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的相關(guān)資料,每個(gè)表單el-form由多個(gè)表單域el-form-item組成,需要的朋友可以參考下

elemnet ui的el-form-item的表單項(xiàng)label和表單項(xiàng)內(nèi)容原本是默認(rèn)在同一行顯示的，將el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行怎么實(shí)現(xiàn)呢？

效果如下：

法1：elemnetUI官方的方法label-position=“top”

法2：

思路：將el-form或者el-form-item中的label-width屬性去掉或者設(shè)置為0，如果label長度超出一行需要設(shè)置以下樣式屬性：加上如下樣式代碼：

<style scoped>
/deep/ .el-form-item__label{
  text-align:left;
  float: none;
  word-break: break-word;
}
</style>

附：el-form的label過長換行+根據(jù)label長度自動(dòng)撐開

先上效果圖

1、在需要換行的label進(jìn)行改寫，以及綁定class

<el-form-item :label="'活動(dòng)名稱\n（換行）'" class="fold_label" prop="name">
            <el-input v-model="filterForm.name"></el-input>
          </el-form-item>

label中需要換行的地方加上‘\n’
2、css

/* 過于長的label分兩行展示樣式 */
.fold_label .el-form-item__label {
  white-space: pre-line;
  text-align-last: justify;
  text-align: justify;
  margin-top: -4px;
  line-height: 25px;
  text-justify: distribute-all-lines;
}
/* 其他label根據(jù)寬度自動(dòng)撐開 */
.el-form-item__label {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}

這里如果不起作用可以用deep穿透一下

總結(jié) 

到此這篇關(guān)于el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-form-item表單項(xiàng)內(nèi)容換行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論