Question

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

真实字符串：“你好，这是第一个选项”，在选项和输入容器中显示：“您好，这是选项.....”

这是可以实现的吗？怎么做？我尝试过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;
}

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

1 个答案: