Element UI - el-select（选择器）下拉多选菜单不换行显示

ElementUI 是一款很强大的组件，但是其中或许也有一些功能不满足我们的需求或者审美，比如本人今天遇到一个问题：当我使用select多选框多选的时候，下拉框被撑开了，这样不仅自身不美观，旁边的组件都很有可能受到布局影响！！！

下图为官方例子：

Ps：第二张图虽然显示在同一行内，但是数据不直观！

---

解决方案

很简单：超出隐藏，那么设置在哪呢？我看了下生成的DOM，发现了这样一组代码：

原来 Element 会把我们所选择的内容动态的添加在这组 DOM 里，那么下面就要设置了，原理很简单，给父级设置超出隐藏（注意不要放在当前组件 scoped 中哦，不会生效，除非穿透样式）。

// 在你的重置样式表内加入这段代码即可
.el-select__tags {
  white-space: nowrap;
  overflow: hidden;
}

效果图

Ps：不过还是有一点不完美，本来想超出的部分可以用鼠标滚动（滚轮或鼠标点击滚动），希望有大佬可以指点下~