在用户键入时停止使反应选择宽度扩展

Question

我正在使用反应选择。但是，不知何故，当用户输入这么多字符时，输入容器会水平增长，甚至会破坏屏幕（屏幕上的宽度）。如何使宽度在每种情况下都是静态的？示例条件是当用户输入或选项中显示的值太长时，我希望它只显示部分字符，例如：

真正的字符串：'你好，这是选项一，伙计'， 显示在选项和输入容器中：'hello this is option.....'

可以实现吗？怎么做？我试过this，但没有用。

这里是 react-select 样式的完整代码：

const styles = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? 'grey' : 'grey',
    color: state.isSelected ? 'white' : 'black',
    ':active': {
      backgroundColor: state.isSelected ? 'grey' : 'grey',
      color: state.isSelected ? 'white' : 'white',
    },
  }),
  control: (base, state) => ({
    ...base,
    background: 'white',
    borderRadius: 0,
    borderTop: 0,
    borderLeft: 0,
    borderRight: 0,
    borderColor: state.isFocused ? 'black' : 'black', // disable blue color in the box when input focused
    boxShadow: state.isFocused ? 0 : 0,
    whiteSpace: 'nowrap',
    width: '100%',
  }),
  menu: base => ({
    ...base,
    borderRadius: 0,
    hyphens: 'auto', // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
    marginTop: 0, // kill the gap
    textAlign: 'left',
  }),
  menuList: base => ({
    ...base,
    padding: 0, // kill the white space on first and last option
    backgroundColor: 'grey',
    maxHeight: '80px',
    overflowY: 'auto',
  }),
  indicatorSeparator: base => ({
    ...base,
    display: 'none',
  }),
  dropdownIndicator: (base, state) => ({
    ...base,
    transition: 'all .2s ease',
    transform: state.isFocused ? 'rotate(180deg)' : null,
  }),
  noOptionsMessage: base => ({
    ...base,
    color: 'white',
  }),
  valueContainer: base => ({
    ...base,
    overflowX: 'hidden',
    display: 'inline-block',
  }),
  input: base => ({
    ...base,
    display: 'inline-block',
  }),
};

谢谢！

Answer 1

您可以在输入元素中添加以下样式吗（假设它是valueContainer 并检查它是否隐藏了溢出

{
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}