很多時候下拉框的內容是不可控的，如果下拉框選項內容過長，勢必會導致頁面非常不協調，解決辦法就是，單行省略加文字提示。

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="請選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-tooltip
placement="top"
:disabled="item.label.length<17"
>
<div slot="content">
<span>{{item.label}}</span>
</div>
<div class="iclass-text-ellipsis">{{ item.label }}</div>
</el-tooltip>
</el-option>
</el-select>

<script>
export default {
data() {
return {
options: [{
value: '選項1',
label: '黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕黃金糕'
}, {
value: '選項2',
label: '雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
}],
value: ''
}
}
}
</script>

<style scoped>
.el-select {
width: 300px;
}
.el-select ::v-deep .popper-class {
width: 300px;
}
.iclass-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

效果如下：

轉自：https://blog.csdn.net/Amnesiac666/article/details/121156514