el-form-item label换行自适应高度
时间: 2024-11-14 15:15:11 浏览: 75
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
在Ant Design Vue的`el-form-item`组件中,如果你需要让"label"标签换行并且自适应高度,可以利用CSS来调整样式。你可以设置`label`元素的`display`属性为`inline-block`,然后给它添加一个固定的宽度,并使用`vertical-align: bottom`使其下对齐于输入框。当内容过长导致换行时,可以通过增加`line-height`值使得每一行的高度保持一致。
例如:
```html
<template>
<el-form :inline="true">
<el-form-item label="这是很长很长很长的标签文本,它会自动换行并保持一定高度">
<el-input v-model="inputValue"></el-input>
</el-form-item>
</el-form>
</template>
<style scoped>
.el-form-item__label {
display: inline-block;
width: 200px; /* 自定义宽度 */
vertical-align: bottom;
line-height: 34px; /* 根据实际需求调整行高 */
}
</style>
```
在这个例子中,如果"label"的内容超出指定宽度,就会自动换行,并且保持每个字行的高度相对固定。
阅读全文