我刚好碰到过类似的需求，给你两种靠谱的解决方案，不管是纯CSS快速搞定，还是用Vue自定义模板做更灵活的控制，都能实现el-select的选项和选中值自动换行（代替默认的文本省略）效果：

这个方法最简单，不需要修改组件结构，直接通过全局或者局部样式覆盖Element UI的默认样式即可：

/* 处理下拉选项的文本换行 */
.el-select-dropdown__item {
  white-space: normal !important; /* 取消默认的强制不换行设置 */
  word-wrap: break-word; /* 超长单词自动拆分换行 */
  line-height: 1.4; /* 调整行高，让换行后的文本更易读 */
  padding: 8px 15px !important; /* 可选：调整内边距，避免文本挤在一起 */
}

/* 处理单选场景下选中值的文本换行 */
.el-select .el-select__input {
  white-space: normal !important;
  word-wrap: break-word;
}

/* 处理多选场景下的标签文本换行 */
.el-select__tags-text {
  white-space: normal !important;
  word-wrap: break-word;
}

Element UI默认给这些元素设置了white-space: nowrap强制不换行，我们把它改成normal就能让文本自动换行，word-wrap: break-word是为了防止超长单词撑破容器。如果你的样式被Element的默认样式覆盖，记得加!important或者给选择器加父组件类前缀来提升优先级。

如果需要对换行逻辑或者内容样式做更个性化的调整，可以用el-select提供的slot来自定义选项和选中内容：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <!-- 自定义下拉选项模板，实现换行 -->
    <template #option="{ item }">
      <div class="custom-option-text">{{ item.label }}</div>
    </template>

    <!-- 自定义选中值模板（单选场景） -->
    <template #default>
      <div v-if="selectedValue" class="custom-selected-text">
        {{ selectedValue.label }}
      </div>
    </template>
  </el-select>
</template>

<script setup>
import { ref } from 'vue';
const selectedValue = ref(null);
// 模拟选项数据
const options = ref([
  { value: 1, label: '这是一段非常非常长的文本，需要自动换行显示，而不是被省略掉，测试一下换行效果是否正常' },
  { value: 2, label: '这是另一段超长文本，用来验证下拉选项和选中值的换行功能' }
]);
</script>

<style scoped>
.custom-option-text {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
  padding: 8px 0;
}

.custom-selected-text {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}
</style>

这个方案的好处是可以更灵活地控制内容结构，比如你可以在换行的文本旁边加图标、调整排版，甚至根据文本长度动态处理样式。

内容的提问来源于stack exchange，提问作者Noa