反应选择、多选和文本溢出 [英] React-Select, Multi Select and Text Overflow

问题描述

我正在使用带有多选功能的 React-Select 组件.我面临的问题之一是，如果用户选择 3 或 4 个选项，UI 看起来会很糟糕，因为文本开始溢出并导致组件水平和垂直增长.

I am using React-Select component with multi select. One of the problems I am facing is that if the user select 3 or 4 options the UI looks pretty bad because the text begins to overflow and that causes the component to grow either horizontally and vertically.

我想要一种行为，其中组件的大小保持不变，如果用户选择更多选项，则它只显示..."(省略号)，而不是尝试显示新选择的选项.

I want to have a behavior where the size of the component remains the same and if the user selects more options then it just shows "..." (ellipsis) rather than try to show the newly selected options.

我想要的行为更符合这个组件

The behavior I want is more inline with this component

http://instructure-react.github.io/react-select-box/

看看它如何处理多选.

我现在不想更换组件，因为我们已经使用 React-Select 进行了大量测试.

I don't want to swap out components now because we have done lots of testing with React-Select.

你能给我一些关于如何在不删除 react-select 的情况下实现这一目标的指导方针.

Can you give me some guide lines on how to achieve this without removing react-select.

推荐答案

我设法实现了省略号效果和将显示保留在一行，这是一个工作示例https://codesandbox.io/s/v638kx67w7希望这有帮助

i've managed to achieve both the ellipsis effect and leaving the display at one row, here is a working example https://codesandbox.io/s/v638kx67w7 hope this helps

这篇关于反应选择、多选和文本溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！