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

Question

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

我需要将这些值排列在同一行中。

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

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

但是当我选择多个值时，它们就在输入字段之外。

Answer 1

您可以指定maxTagCount

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

Answer 2

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

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

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

Answer 3

您还可以将 maxTagCount 设置为“响应式”，这将自动确定可以在一行上显示的标签

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