Reactjs 反应选择、多选和文本溢出
我正在使用带有多重选择的反应选择组件。我面临的一个问题是，如果用户选择3或4个选项，UI看起来非常糟糕，因为文本开始溢出，导致组件水平和垂直增长 我希望组件的大小保持不变，如果用户选择更多选项，那么它只显示“…”（省略号），而不是尝试显示新选择的选项 我想要的行为更符合这个组件 查看它如何处理多选 我现在不想更换组件，因为我们已经用React Select做了很多测试Reactjs 反应选择、多选和文本溢出,reactjs,react-select,Reactjs,React Select,我正在使用带有多重选择的反应选择组件。我面临的一个问题是，如果用户选择3或4个选项，UI看起来非常糟糕，因为文本开始溢出，导致组件水平和垂直增长 我希望组件的大小保持不变，如果用户选择更多选项，那么它只显示“…”（省略号），而不是尝试显示新选择的选项 我想要的行为更符合这个组件 查看它如何处理多选 我现在不想更换组件，因为我们已经用React Select做了很多测试 您能否给我一些指导，说明如何在不删除react-select的情况下实现这一点。这是为给定的react-select元素生成的
您能否给我一些指导，说明如何在不删除react-select的情况下实现这一点。这是为给定的react-select元素生成的Html
。反应选择框容器{
位置：相对位置；
宽度：240px；
显示：内联块；
背景色：#fff；
边界半径：4px；
文本对齐：左对齐；
盒影：0.02×rgba（0,0,0,3）；
}
.反应选择框{
填充：15px0；
显示：内联块；
光标：指针；
边界：无；
宽度：100%；
文本对齐：左对齐；
背景色：透明；
}
.反应选择框：焦点{
大纲：0；
盒影：0 0 4px#0493D1；
}
.反应选择框：在{
内容：''；
z指数：1；
位置：绝对位置；
高度：20px；
顶部：15px；
右：34px；
左边框：1px实心#CBD2D7；
}
.反应选择框：之后{
内容：''；
位置：绝对位置；
z指数：1；
顶部：23px；
右：13px；
边框顶部：6px实心#7B8E9B；
左边框：5px实心透明；
右边框：5px实心透明；
}
.选择框标签，
.反应选择框选项{
线高：16px；
字体大小：12px；
字体大小：粗体；
颜色：#7B8E9B；
}
.选择框标签{
填充：0 40px 0 20px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
颜色：#0493D1；
}
.反应选择框为空。反应选择框标签{
颜色：#7B8E9B；
}
.反应选择框单击外层{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
z指数：2；
}
.清除选择框{
位置：绝对位置；
顶部：15px；
右：0；
宽度：35px；
高度：20px；
背景色：#fff；
文本缩进：-9999em；
z指数：3；
边界：无；
}
.反应选择框清除：之前{
内容：“Ã-”；
位置：绝对位置；
顶部：2个；
左：10px；
z指数：1；
背景色：#7B8E9B；
边界半径：100%；
字体大小：13px；
颜色：#fff；
线高：1；
宽度：15px；
高度：15px；
文本缩进：0；
文本对齐：居中；
}
.清除反应选择框：悬停，
.反应选择框清除：焦点{
大纲：0；
}
.反应选择框清除：悬停：之前，
.反应选择框清除：焦点：之前{
背景色：#0493D1；
}
.反应选择框隐藏{
显示：无
}
.选择框选项{
边际：2px0；
位置：绝对位置；
填充：10px0；
宽度：240px；
最高：100%；
左：0；
z指数：4；
背景色：#fff；
边界半径：4px；
盒影：0.02×rgba（0,0,0,3）；
}
.选择框选项列表{
列表样式：外部无；
保证金：0；
填充：0；
}
.反应选择框选项{
填充：10px 20px；
保证金：0；
光标：指针；
显示：块；
线高：1.2；
文字装饰：无；
}
.反应选择框选项：悬停{
颜色：#0493D1；
背景色：#F4；
}
.选择反应选择框选项{
颜色：#CBD2D7；
}
.反应选择框多个.反应选择框选项{
左侧填充：42px；
位置：相对位置；
}
.反应选择框多个.反应选择框选项：之前{
内容：''；
位置：绝对位置；
线高：1；
文本对齐：居中；
左：20px；
顶部：9px；
边界半径：3px；
高度：12px；
宽度：12px；
右边距：10px；
边框：1px实心#7B8E9B；
背景#f9f9f9；
垂直对齐：中间对齐；
}
.反应选择框多个。反应选择框选项选定：之前{
内容：“–œ”；
}
.反应选择框多个。选择反应选择框选项{
颜色：#1F3344；
}
.反应选择框选项：焦点，
.反应选择框选项聚焦{
颜色：#0493D1；
大纲：0；
背景色：#DDE2E5；
}
.反应选择框关闭{
颜色：#0493D1；
文本转换：大写；
背景色：透明；
边界：无；
填充：5px0；
显示：块；
文本对齐：居中；
宽度：100%；
字体大小：粗体；
光标：指针；
大纲：无；
}
.反应选择框关闭：悬停，
.反应选择框关闭：焦点{
文字装饰：下划线；
}
.反应选择框为空。反应选择框关闭{
颜色：#CBD2D7；
}
.反应选择框本机{
位置：绝对位置；
左：-99999 em；
}
喜爱的颜色
接近
喜爱的颜色
红色
绿色
蓝色
希望这有帮助您应该添加一些css来限制react select与其父容器之间的距离。例如
最大宽度：100%searchable={true}