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

Question

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

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

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

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

有什么建议吗？

Answer 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"
      })

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

react-select V2 - how to achieve `overflow-x: hidden` on an `isMulti` `ValueContainer`

css

reactjs

react-select