频道栏目
首页 > 程序开发 > 综合编程 > 其他综合 > 正文
解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题 - kristy1993 - 博客园
2019-04-09 15:58:16         来源:kristy1993  
收藏   我要投稿

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

我用的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;
   }

效果如下,横向滚动条顺利出现:

点击复制链接 与好友分享!回本站首页
上一篇:2019周笔记(2.18-2.23) - 第三皇族 - 博客园
下一篇:s21day08 python笔记 - 林染 - 博客园
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站