antd多选下拉框一行展示

antd多选下拉框一行展示

我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。

我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。

下面有2种方案来实现这个效果。

1.利用浮动原理

设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。

 .ant-select-selection--multiple {
            max-height: 32px;
            overflow: hidden;
  }

这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。

2.flex布局

将下拉框选项放到一行显示，如果超出了下拉框长度则隐藏。默认的选项是采用float浮动显示的，所以我们要屏蔽掉浮动效果。

 .ant-select-selection--multiple .ant-select-selection__rendered {
            overflow: hidden;
        }
        .ant-select-selection--multiple .ant-select-selection__rendered ul {
            display: flex;
            flex-wrap: nowrap;
            overflow: hidden;
            float: left;
        }
        .ant-select-selection--multiple .ant-select-selection__choice {
            float: none;
            overflow: visible;
        }
        .ant-select-selection--multiple .ant-select-search--inline {
            float: none;
            position: absolute;
        }
        .ant-select-selection--multiple {
            max-height: 32px;
            overflow: hidden;
        }

这里重写了下拉选项的样式，达到了目的，但是会存在另一个问题，因为下拉选项排成了不换行的一列，那么必须指定下拉框的长度为固定值，不能使用百分比，因为一旦选中的下拉值超出了屏幕宽度，那么他会自动撑大整个屏幕的宽度。