使用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>
     )
  }
}

这里是fiddle example。