react-select V2 - 如何在 `isMulti` `ValueContainer` 上实现 `overflow-x: hidden`答案

【问题标题】：react-select V2 - how to achieve `overflow-x: hidden` on an `isMulti` `ValueContainer`react-select V2 - 如何在 `isMulti` `ValueContainer` 上实现 `overflow-x: hidden`
【发布时间】：2018-09-10 05:35:03
【问题描述】：

我试图弄清楚如何获得一个设置为isMulti 的react-select V2 组件，以在它们超过ValueContainer 的宽度时隐藏所选值（而不是换行并展开组件的高度）。

我尝试通过将以下样式应用于valueContainer 来实现这一点（没有运气）：

 valueContainer: base => ({
            ...base,
            overflowX: "hidden"
          })

这是 unwanted 行为的example（我的目标是让第三个值部分隐藏或截断在与其他 2 个值相同的行上，而不是出现在新的行）。

有什么建议吗？

【问题讨论】：

标签： css reactjs react-select

【解决方案1】：

尝试使用 css 样式inline-block。

valueContainer: base => ({
        ...base,
        display: "inline-block",
        overflowX: "hidden"
      })

如果您也将此样式应用于input 元素，它也会避免换行。

    valueContainer: base => ({
        ...base,
        display: "inline-block",
        overflowX: "hidden"
      }),
    input: base => ({
        ...base,
        display: "inline-block"
      })

而且，如果你防止块之间的中断，通过将whiteSpace: 'nowrap' 添加到包含control，应该保持所有元素在同一行：

      control: base => ({
        ...base,
        width: 200,
        whiteSpace: "nowrap"
      }),
      menu: base => ({ ...base, width: 200 }),
      valueContainer: base => ({
        ...base,
        overflowX: "hidden",
        display: "inline-block"
      }),
      input: base => ({
        ...base,
        display: "inline-block"
      })

【讨论】：

谢谢！这确实起到了隐藏溢出值的作用。但是，它并不能完全解决扩展高度的问题，因为一旦将值插入容器，Input 组件就会分解为新行。我也尝试将其设置为inline-block - 甚至在主Select 组件上将isSearchable 设置为false，但字段底部的额外行仍会在宽度限制后立即创建到达顶行。有什么想法可以解决这个问题（最好是保持组件可搜索）？
@itaydafna 您可以将类似的样式inline-block 应用于input 元素，这样它也不会换行。我已更新我的答案以包含此附加提示。
我明白你在说什么，我也尝试了这个解决方案 - 但是，由于某种原因（可能是因为 Input 组件的包装方式），它会在超过了第一行的宽度。
@itaydafna 请查看我的答案的最新编辑，如果您将whiteSpace: 'nowrap' 应用于包含control，那么我相信您会看到您想要的样式。