el-breadcrumb超出隐藏

El-Breadcrumb 是 Element UI 提供的一个用于导航路径展示的组件，当 Breadcrumb 的内容超过容器宽度时，通常会设置一个自动隐藏或显示省略号的功能。要实现超出内容隐藏的效果，你可以通过 CSS 或者组件提供的 API 来调整。下面是一种基本的做法：

1. **CSS 隐藏**:
在 `.el-breadcrumb` 或者其内部 `.el-breadcrumb-item` 的样式中添加 `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`，这样超长的文字就会被截断并显示省略号。

.el-breadcrumb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. **组件属性设置**:
如果你想要更精细地控制，可以在组件实例上设置 `:separator-class` 属性，并监听 `max-len` 属性的变化。当文字长度超过设定值，动态改变省略号的样式。

<el-breadcrumb separator-class="ellipsis" :max-len="10">
  <!-- ... -->
</el-breadcrumb>

export default {
  data() {
    return {
      maxLen: 10,
    };
  },
  watch: {
    'maxLen'(value) {
      // 更新省略号样式
    }
  }
};