使用css将下拉值显示到下拉框的宽度答案

【问题标题】：Display drop down values upto the width of drop down box using css使用css将下拉值显示到下拉框的宽度
【发布时间】：2019-05-20 21:09:52
【问题描述】：

如果选项值很大，那么我需要用“....”剪切显示值例如对于附加图像，如果值超出下拉框的宽度，则选项值应显示为“11111 ....”

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。避免一次问多个不同的问题。请参阅How to ask 页面以获得澄清此问题的帮助。

标签： html css reactjs react-bootstrap

【解决方案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。

【讨论】：

我刚刚注意到您要求提供 CSS 版本。我尝试了一些选项，但是我无法提出一个可行的解决方案。应用 textOverflow: ellipsis 和 maxWidth:'100px' 似乎不适用于选项标签。