el-select使用了多选时，选中多个会撑开原始高度，样式错乱，使用tag展示，一行显示全部内容，超过显示长度并以...显示的方法

使用el-select的多选下拉选择时，如果默认的选择会撑开input，显示所选的全部内容；

这样子很难看，样式还不整齐。

文档中有tag的形式展现，设置collapse-tags属性将它们合并为一段文字：

就不会出现上述的情况了。

但是当多选的内容多长的时候，后面还是会撑开换行，照样使样式不整齐：


看了上面的element元素发现：
这时候需要加内容一行显示，内容超出隐藏，溢出时显示省略标记…的写法了！
css基本功大显身手的时候到啦！（记不起来或者不会的小伙伴记得百度哈…）
word-break:keep-all; / 不换行 /
white-space:nowrap; / 不换行 /
overflow:hidden; / 内容超出宽度时隐藏超出部分的内容 /
text-overflow:ellipsis; /溢出时显示省略标记…；需与overflow:hidden;一起使用/
然后在el-select上加一个class属性“tags-select-input”
添加相应样式：


样式上面实现了想要的效果，这时候发现x的位置有点偏移，再加点对应的调整：

整个的就完成了。
el-select多选想要一行显示勾选内容，不换行显示，超过隐藏，溢出省略号显示等功能都可实现。
el-select添加class属性，如果是单组件scoped的样式需要深度样式/deep/这种实现（本人是单组件）；或者不用scoped全局的也行。