如何防止在反应选择控件中选择的长字符串值被截断？

Question

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

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

 <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",
  }),
})