vue+element项目做移动端适配时，面包屑ui过长把右上角角色栏挤出空间解决方案

给element做移动端适配的时候，页面顶上的面包屑为了适配手机屏幕总会把右上角的角色框挤出去，给面包屑增加空间，解决办法如下：

首先找到面包屑所在文件，

文件位置如下
src/components/Breandcrumd/index.vue

找到.app-breadcrumb.el-breadcrumb样式

在样式中加上width宽度限制即可

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 12px;
  width: 200px;
  overflow: hidden;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>

前后效果如图

修改前

修改后