el-select使用collapse-tags的时候不换行

最近改bug遇到这样一种需求，需要collapse-tags的时候不换行
下图是bug

他需要改完之后是这样的

下面就来看看我是怎么做的吧

首先最重要的是

flex-wrap: nowrap !important;

这个是不换行的关键，需要给el-select__tags加上这个属性.

.el-select__tags {
      flex-wrap: nowrap !important;
      word-break: keep-all;
      white-space: nowrap;
}

但是这个加上之后呢，还是出现了一个问题这个下拉变高了

这样是肯定过不了测试的啊，应该要给文字的tag一个最大的宽度才行。
最开始我给了max-width为一个固定值，但是有兼容性的要求，在小屏上看也还是会换行，这还是会被提bug啊

于是乎，最终版出现了

//我这里代码是scoped的所以要加/deep/
//给select加一个class，我这里加的是 my-select
    /deep/ .my-select {
      .el-tag--mini {
      //这里的宽度要根据实际的select来进行调整
        width: calc(100% - 45px);
      }
      .el-select__tags {
        max-width: 50%;
        flex-wrap: nowrap !important;
        word-break: keep-all;
        white-space: nowrap;
      }
    }

调整完成之后呢就是这样了

而且还能兼容小屏，因为宽度不是定死的，是计算的。

感谢观看，你学会了吗？