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