当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题

解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题

2019年04月10日  | 移动技术网IT编程  | 我要评论

我用的element-ui是v1.4.3.

目前遇到一个问题，在用el-select组件的时候，当选项的内容很长的时候，会撑开下拉菜单的宽度，这样影响美观。具体如下图所示：

解决这个问题的思路：设置下拉菜单的最大宽度，然后文字超出时，出现横向滚动条。

解决时的问题就是，设置了宽度，横向滚动条却不出现，如下图所示，直接将超出的文字隐藏，并且后面添加省略号

最后我添加了如下的代码：

 .el-select-dropdown{
        max-width: 243px;
    }
    .el-select-dropdown__item{
        display: inline-block;
    }
    .el-select-dropdown__item span {
        min-width: 205px;
        display: inline-block;
   }

效果如下，横向滚动条顺利出现：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网