亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

效果如下：

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

法2：

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

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

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

先上效果圖

1、在需要換行的label進行改寫，以及綁定class

<el-form-item :label="'活動名稱\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ù)寬度自動撐開 */
.el-form-item__label {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}

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

總結(jié) 

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

相關文章

最新評論