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

Question

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

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

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

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

但是当我选择几个值时，它们就在 inputr 字段之外。

score 4 · Accepted Answer

您可以指定 maxTagCount

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

score 2 · Accepted Answer

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

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

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

2 回答 2