如何防止 selected 长字符串值在 react-select 控件中被截断？

Question

我正在使用 react-select Creatable 组件。每当我 select 长值时，它都会被截断并在 selected 值的末尾添加 3 个点。有什么办法可以禁用此截断吗？我想查看完整的 selected 值。

如果有任何帮助，这是我的代码

 <ReactCreatableSelect
            disabled={isDisabled}
            filterOption={createFilter({ ignoreAccents: false })}
            options={options}
            onChange={this.onNewSelectChange}
            onCreateOption={this.onCreateOption}
            components={{ MenuList }}
            isMulti={this.isMulitpleChoice()}
            value={((!Array.isArray(value) ? [value] : value) as Array<any>).map(x => ({ label: x, value: x }))}
            isClearable={true}
            isSearchable={true}
            isLoading={loading}

          />

Answer 1

您需要覆盖 MultiValueLabel 的样式并删除当前默认应用的 overflow: hidden 和 text-overflow: ellipsis 样式。

const ReactSelectStyles = () => ({
  multiValueLabel: styles => ({
    ...styles,
    overflow: auto,
    text-overflow: ""
  }),
})

<ReactCreatableSelect 
  ...
  styles={ReactSelectStyles()}
/>

我建议不要这样做，因为这样做是有原因的。目前它只会在文本太大而无法放入 Select 框时截断文本。

Answer 2

感谢Dairylee，我找到了正确的解决方案

const ReactSelectStyles = () => ({
  multiValueLabel: (styles: any) => ({
    ...styles,
    whiteSpace: "normal",
  }),
})

如何防止 selected 长字符串值在 react-select 控件中被截断？

How to prevent selected long string values from getting truncated in the react-select control?

javascript

controls

reactjs

react-select