Question

我正在尝试弄清楚如何获得一个react-select V2组件，该组件设置为isMulti来隐藏选定的值，一旦它们超过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`

1 个答案: