时间戳

首页 > 解决方案 > 如何防止选定的长字符串值在反应选择控件中被截断？

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

问题描述

我正在使用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}

          />

标签： javascriptreactjscontrolsreact-select

解决方案

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

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

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

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

推荐阅读