'Element-Plus: The last el-menu-item is automatically displayed as an ellipsis

Here is the source code, I just add a margin:auto to el-header，it exactly Centered display， but the last el-menu-item is displayed as "。。。"，when I put the mouse hover on the "。。。"，the last menu-item "注册" was shown int the blow.

If I remove the CSS, the last one displayed normally, but the menu will not be centred,I do not know how to fix it.

<el-header>
      <el-menu
          :default-active="'/'+this.$route.path.split('/')[1]"
          mode="horizontal"
          :router="true"
          :style="{background:'#f7f7f7'}"
      >
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/Lost">寻物广场</el-menu-item>
          <el-menu-item index="/Found">招领广场</el-menu-item>
          <el-menu-item index="/Post">发布启事</el-menu-item>
          <el-menu-item index="/Me">我的</el-menu-item>
          <el-menu-item index="/Login">登录</el-menu-item>
          <el-menu-item index="/Register">注册</el-menu-item>
      </el-menu>

</el-header>

.el-header {
    margin: auto;
}
csselement-ui


Solution 1:[1]

I have solved this problem, just add a :ellipsis="false" to the el-menu.

 <el-menu
                :default-active="'/'+this.$route.path.split('/')[1]"
                mode="horizontal"
                :router="true"
                :style="{background:'#f7f7f7'}"
                :ellipsis="false"
            >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BWQ

Related Questions