如何使单个 select 中的 selected 值增长类似于多个 select

Question

在 React select 中，如果我使用 multi select，所有 selected 值都显示为药丸，整个输入框会增长以显示所有 selected 值。但在单个 select 的情况下，它只是保持固定，任何溢出的文本都被省略号截断。在某些情况下，单个 select 将在 UI 上限制宽度，但我可以调整高度范围，以便用户可以看到整个 selected 选项。 CSS 变化可能吗？或者有什么配置吗？

Answer 1

我建议使用自定义 styles 属性创建您自己的 Select 元素，如下所示：

const styles = {
  singleValue: base => ({
    ...base,
    // You will to add a bit more space around your option so it can fit
    maxWidth: "calc(100% - 10px)",
    position: "relative",
    textOverflow: "initial",
    top: "initial",
    transform: "none",
    whiteSpace: "initial"
  })
};

<Select options={options} styles={styles} />

重要的一点是重新设置元素的位置absolute。

这里是live example.

如何使单个 select 中的 selected 值增长类似于多个 select

How to make selected value in single select grow similar to multi select

reactjs

react-select