element-plus - 如何解决el-select多选、可搜索时自动换行撑开页面的问题？
el-select 多选、可搜索时，自动换行撑开页面如何解决？
在可搜索状态下，多选后确保内容不会换行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@3"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus"></script>
<title>Element Plus demo</title>
</head>
<body>
<div id="app">
<el-select style="width: 150px;" class="my-select"
v-model="tv"
filterable
collapse-tags
collapse-tags-tooltip
multiple
placeholder="输入关键字进行搜索"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<script>
const App = {
data() {
return {
tv:'',
message: "Hello Element Plus",
options : [
{
value: 'Option1',
label: 'Option11111111111111111111',
},
{
value: 'Option2',
label: 'Option2222222222222222222',
},
{
value: 'Option3',
label: 'Option333333333333333333333',
},
{
value: 'Option4',
label: 'Option4444444444444444',
},
{
value: 'Option5',
label: 'Option5',
},
]
};
},
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</style>
</body>
</html>共有2个答案
重构select的样式吧，element的之前写过一个，你参考一下
// 多选且可搜索下拉框样式重置
.collapse-filterable-tags{
.el-select__tags{
flex-wrap: nowrap;
overflow: auto;
scrollbar-width: none;
>span{
text-align: right;
}
&::-webkit-scrollbar{
width: 0px !important;
height: 0px !important;
display: none !important;
}
.el-select__input{
min-width: 60px;
}
}
.el-tag{
font-size: 14px;
color: rgba(0,0,0,.65) !important;
margin-left: 0px !important;
padding-left: 0px;
padding-right: 0px;
background: none !important;
border: 0px;
&::before{
display: inline-block;
padding: 0px 7px;
content: '|';
color: rgba(0, 0, 0, 0.45);
}
&:first-child{
&::before{
content: '';
}
}
}
.el-tag__close{
display: none;
}
}
**解决方案**：
可以通过 CSS 样式调整 `el-select` 多选标签的显示方式，避免其自动换行撑开页面。具体可以通过设置 `.el-select-dropdown__item.selected` 的样式，使其内容不换行，并使用 `white-space: nowrap;` 和 `overflow: hidden;` 等属性来控制标签的显示。同时，可以调整 `.el-select` 的宽度或其他相关样式来适应内容。
在示例代码中，可以添加以下 CSS 样式来解决该问题：
.my-select .el-select-dropdown__item.selected {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px; / 添加间距以便区分多个标签 /
max-width: calc(100% - 16px); / 减去左右padding的值，确保标签不会超出容器宽度 /
box-sizing: border-box;
}
/ 如果标签过长，可以考虑设置.el-select的宽度更大一些，或者根据实际需求调整 /
.my-select {
width: 200px; / 根据需要调整宽度 /
}
这样设置后，`el-select` 在多选且可搜索状态下，标签将不会换行，而是显示为省略号形式，避免撑开页面。-
其实是想要实现这样的样式： el-select 多选，选中的内容以逗号分割，最小宽度80px;最大宽度300px;超出最大宽度显示省略号 就是大概是下面这样，一行显示已经处理了，但是最小80px，然后input框的宽度根据选中的项的字符串内容变大，最大300px,超过显示省略号还没想好如何处理，有无大佬给个思路。 看了网上有说可以用 el-select 的prefix，结合计算属性去实现，但是pr
-
本文向大家介绍详解element-ui中el-select的默认选择项问题，包括了详解element-ui中el-select的默认选择项问题的使用技巧和注意事项，需要的朋友参考一下 直接绑定将option中的value值绑定给v-model 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
请问大佬们，如何对一行el-form-item内多个el-input输入框的进行只能输入整数或者小数的校验？
-
el-select value值设置的正确，但是回显不显示对应的label；options和value都是从表格数据里面同时拿到的，而且是表格里面偶发性会有一条数据出现这种情况 <el-table-column label="状态" prop="status"> 调用forceUpdate也没用，我用的是2.15的版本 求大神指导应该怎么处理
-
aside里面套了el-menu 样式为 折叠动画显示正常，但是展开动画就不正常了，我看表象应该是aside正常展开，但是el-menu展开没有跟随aside。 有种解决办法就是直接把menu的border设成none，然后aside写个border，这样asider的border就可以跟着折叠一起了。但是不太理解，是因为折叠时间吗？ 是因为展开的时候文字出现较晚的原因吗
-
el-image 使用 lazy 会无法正常显示, 在 el-carousel外面就是正常的。 这是什么原因造成的？如何解决呢？
-
vue3+element-plus使用分页table，当数据多页时，如何在跨页切换时保留其他页已勾选项的勾选状态？ 例如：多页下勾选，第一页勾选3条，第二页勾选2条，返回第一页，依旧显示勾选的3条(前提是第一页中仍然有该3条数据)
-
vue3+element plus项目，当使用了el-table的展开行时，想要实现全部展开功能，在全部展开时会卡顿，阻塞线程。 使用了:expand-row-keys="expandRowArr",通过将key全部插入数组expandRowArr.value = commentList.value.map(item => item.commentIndex)，来实现全部展开的效果。 最开始使用的