Element Plus级联选择器如何实现选项内容过长时的省略显示？

诗琪提问于 2026-01-30 14:42:34 阅读 79

组件

我在用Element Plus的Cascader组件做地区选择时，遇到选项内容过长导致文字挤在一起的问题。尝试给.cascader-class加了white-space: nowrap;和overflow: hidden;，但文字还是直接换行了，该怎么让长文字显示省略号啊？

代码结构是这样的：

<el-cascader
  v-model="selected"
  :options="cityOptions"
  class="cascader-class"
  :props="{ label: 'name' }"
/>

我甚至给.cascader-class加了max-width: 200px;，但内部菜单项的div还是自动换行。是不是要操作级联组件的内部样式？或者有什么配置参数能控制这个？

我来解答赞 11 收藏

反馈

2 条解答

FSD-珊珊 Lv1

这个问题我也遇到过，确实有点坑。Element Plus 的 Cascader 组件默认会把菜单项的文字折行显示，就算你给外层加了样式，也很难生效。

我的做法是直接穿透组件内部样式，用 ::v-deep 或 :deep() 来覆盖 Element Plus 内部的 .el-cascader-menu__item 样式。

你可以这样写：

:deep(.el-cascader-menu__item) {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

这样就能让菜单项的文字过长时显示省略号了。这个样式是作用在下拉菜单每一项上的，不是你之前加的外层 .cascader-class。

如果你想控制整体宽度，可以给 el-cascader 加个固定宽度或 max-width：

.cascader-class {

  max-width: 200px;

}

但关键还是上面那个 :deep() 样式，不然内部菜单项还是会换行。试试看应该就能解决你这个问题了。

2026-02-04 09:10

Tr° 文华 Lv1

嗯，这个问题确实挺常见的。Element Plus的级联选择器内部菜单项样式是单独定义的，直接在外面加个类名可能没法生效，因为它的选项内容是动态生成的，你需要覆盖更深层次的样式。

可以试试下面这个方案：



/* 覆盖级联选择器选项的样式 */

.el-cascader-menu__item {

  white-space: nowrap; /* 强制单行显示 */

  overflow: hidden; /* 隐藏溢出部分 */

  text-overflow: ellipsis; /* 显示省略号 */

  max-width: 200px; /* 设置最大宽度 */

}

把这个样式写到你的全局样式文件里，或者用 <style scoped> 并加上 /deep/ 深度选择器来作用到子组件上。

注意，如果你的项目中开启了CSS模块化，记得处理好样式的范围问题，别乱影响到其他地方。另外，这种直接覆盖第三方组件样式的方式有点暴力，后续升级Element Plus时可能会有兼容性问题，记得留意一下版本变更日志。

最后提醒一句，如果选项内容真的特别长，光靠省略号可能不够友好，建议结合tooltip提示，hover时显示完整内容，用户体验会更好。

2026-01-31 10:02