ブートストラップオプションの幅が長すぎます

Question

私はDBから取得しているオプションのドロップダウンリストを持っています。返されるオプションデータは、非常に長いデータストリングです。私はオプションの幅を最大限に広げたいと思っています。

<span class="col-sm-4"><label>Lists:</label></span> 
<span class="col-sm-4"> 
     <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue"> 
      <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option> 
     </select> 
</span> 

私は別の質問からCSSスニペットを使用：しかし、唯一の選択コンテ​​ナを制御しているように見える

.selectwidthauto { 
    width:50% !important; 
     text-overflow:ellipsis; 
     display: inline-block; 
} 

：私は選択ボックスの幅を変更していChange width of select tag in Twitter Bootstrap

（幅）。オプションがロードされるとき、私はまだ非常に長い文字列を含むオプションにあるテキストの全幅を取得しています。

選択の幅（この場合は50％）、または全幅（自動）以外のサイズに合わせるにはどうすればよいですか？

私が書いたことは、十分に説明されていません。

https://jsfiddle.net/tm1qasjg/3/

私は特定のサイズでテキストをカットするオプション値を必要とする：私は角ではありませんが、それは何が起こっているのかを説明していることフィドルを作成しました。テキスト値全体を表示したくありません。

Answer 1

コードの幅は少し変わっていますが、変更してください！ あなたは、あなたがwidth: 100%を使用することができ全幅を入れて使用したい場合：

.selectwidthauto { 
 
    text-overflow:ellipsis; 
 
    display: inline; 
 
    width: 100%; 
 
}

<span class="col-sm-4"><label>Lists:</label></span> 
 
<span class="col-sm-4"> 
 
     <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue"> 
 
      <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option> 
 
     </select> 
 
</span>

財産width: autowidth: 100%と等しくない、width: autoはデフォルト値です。