vue:label中的内容换行
1.lable操作:label = "'....\n....'"<!--如:<el-form-item :label = "'银行地址\nBank Address'" ><el-input type="text"></el-input></el-form-item>-->注意:双引号中需要添加单引号将内容包裹,然后在换行处添加'\n'2.
·
1.lable操作
:label = "'....\n....'"
<!--
如:
<el-form-item :label = "'银行地址\nBank Address'" >
<el-input type="text"></el-input>
</el-form-item>
-->
注意:双引号中需要添加单引号将内容包裹,然后在换行处添加'\n'
2.css样式
<style scoped>
.el-form>>>.el-form-item .el-form-item__label {
white-space: pre-line;
}
</style>
效果:
虽然成功换行,但是每一行的高度都和右边的<input>高度一样
3.设置label的高度和其内的文字行高
将css样式改为:
<style scoped>
.el-form>>>.el-form-item .el-form-item__label{
white-space: pre-line;
height: 40px;/*设置lable高度*/
line-height: 20px;/*设置行高为label高度的一半(有n行就是label高度的1/n)*/
}
</style>
最终效果:
更多推荐
已为社区贡献1条内容
所有评论(0)