时间戳

首页 > 解决方案 > react-select V2 - 如何在 `isMulti` `ValueContainer` 上实现 `overflow-x: hidden`

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

问题描述

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

我尝试通过将以下样式应用于valueContainer：

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

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

有什么建议么？

标签： cssreactjsreact-select

解决方案

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

推荐阅读