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

我试图弄清楚如何获取设置为isMulti的react-select V2组件，以在所选值超出ValueContainer的宽度时隐藏它们（而不是换成新行并扩大组件的高度） ）。

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

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

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

有什么建议么？

最佳答案

尝试使用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"
      })