el-select 如何保证不换行
时间: 2023-11-10 20:07:27 浏览: 287
为了保证el-select不换行,可以使用以下方法:
1. 使用collapse-tags属性,将选中的标签折叠起来,从而减少占用空间。
2. 使用CSS样式,设置.el-select__tags-text的max-width属性,限制标签的最大宽度,超出部分使用省略号(...)表示。
3. 使用CSS样式,设置.el-select__tags的display属性为flex,使标签以弹性盒子的形式排列,从而避免换行。
4. 使用CSS样式,设置.el-select__tags-text的display属性为inline-block,使标签以块级元素的形式排列,从而避免换行。
参考代码如下:
```
<el-select multiple collapse-tags>
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
<el-option label="Option 3" value="3"></el-option>
</el-select>
<style lang='scss'>
.el-select__tags {
display: flex;
flex-wrap: nowrap;
}
.el-select__tags-text {
max-width: 80px;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
text-overflow: ellipsis;
}
</style>
```
阅读全文