stop make react-select width expanding while user typing - reactjs

Question

i'm using react-select. But, somehow, when user typing so much character, the input container is growing horizontally and even its break the screen (the width over the screen). How to make the width is static in every condition? example condition is when user typing or when the value that displayed in the option is too long, I want it to only display some of the character, for example:
real string: 'hello this is option one dude',
displayed in the option and in the input container: 'hello this is option.....'
is it achievable? how to do it? I've try this but not working.
here is the full code of styling for the 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',
}),
};
thank you!

Answer 1

can you add below styles to your input element (assuming it is valueContainer and check if it hides the overflow
{
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}