el

使用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全局的也行。