Antd如何固定多选组件的大小？

Question

我正在使用 React 的 Ant 设计组件。我想固定多 selection 输入字段的大小，以便将 selected 值放入同一行而不像默认行为那样换行：

我需要将值排列到同一行。

我可以通过覆盖样式来固定输入字段的大小

.ant-select-selection--multiple:before, .ant-select-selection--multiple:after  {
display: inline !important;  }

但是当我 select 几个值时，它们在输入字段之外。

Answer 1

最后我通过添加此 css 样式选项找到了解决方案：

.ant-select-selection--multiple
{
   white-space: nowrap;
   height: 30px;
   overflow: auto
}

因此 div 看起来像一个输入文本字段，当内容接地时，滚动出现在 div 字段的右侧。

Answer 2

您可以指定 maxTagCount

 <Select
  mode="multiple"
  maxTagCount={1}
>
  // here is rendering of the Opitons
</Select>

Antd how to fixe the size of the multi selection component?