Отобразить раскрывающиеся значения до ширины раскрывающегося списка с помощью CSS

Question

Если значение параметра велико, то мне нужно сократить отображаемое значение с помощью «....», например, для прикрепленного изображения значение параметра должно отображаться как'11111 ....', если значение выходит за пределы ширины выпадающего списка

Answer 1

Вы можете сделать что-то вроде этого:

class Hello extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       values: [12312312321, 1231232142412, 1231232313, 12312312312],
     }
   }

   render() {
     return (
       <form>
         <FormGroup controlId="formControlsSelect">
           <ControlLabel>Select</ControlLabel>
           <br />
           <FormControl componentClass="select" placeholder="select">
             <option value="select">Select...</option>
              {this.state.values.map(num => {
                 return <option key={num} value={num}>{num.toString().length > 6 ? num.toString().slice(0, 5).concat('...') : num}</option>             
              })}
           </FormControl>
         </FormGroup>
       </form>
     )
  }
}

Вот пример скрипка .