el-form-item中的label过长导致换行
时间: 2023-12-14 20:31:55 浏览: 704
Label的ToolTip属性,或是a标签的提示换行问题
可以通过设置el-form-item的label-width属性来控制label的宽度,从而避免label过长导致换行的问题。如果label的内容过长,可以使用CSS的text-overflow属性来控制文本的溢出效果,例如使用ellipsis来表示省略号。具体实现方法如下:
```html
<el-form :label-width="100px">
<el-form-item label="这是一个很长很长很长很长很长很长很长很长很长很长的label">
<span class="label-text">这是label的内容</span>
</el-form-item>
</el-form>
```
```css
.el-form-item__label {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 使用省略号表示溢出部分 */
}
.label-text {
/* 其他样式 */
}
```
阅读全文