Antd如何修复多选组件的大小？答案

【问题标题】：Antd how to fixe the size of the multi selection component?Antd如何修复多选组件的大小？
【发布时间】：2017-11-16 21:09:12
【问题描述】：

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

我需要将值放在同一行中。

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

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

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

【问题讨论】：

行满时的预期行为是什么？
我想要的行为是获得一个看起来像输入文本字段的 div，其中有一个滚动并且当里面的文本开始比行长时 div 不会改变大小。我通过添加这种 css 样式找到了解决方案： .ant-select-selection--multiple { white-space: nowrap;高度：30px；溢出：自动}

【解决方案1】：

您可以指定 maxTagCount

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：