ボタンの幅が変わるのを防ぐ基本CSS

Question

基本的なCSSの質問はこちら

「すべてをチェック」を押すたびに、ボタンはリストの名前で表示されます（これは問題ありません）。

問題は次のとおりです。ボタンの幅自体が拡大して大きくなります。私はそれを固定しておきたい。さらに、表示できるリスト項目の数に制限を設定するにはどうすればよいですか？たとえば、項目が多い場合は、「テスト5」の後に「...」と表示されます。

ところで、これは私のcustom.cssにあります.btn-defaultは実際にはブートストラップから来ましたが、私はマルチセレクトクラスでいくつかのものを変更したかったのです。キャレットがテキストのそばにあったので、キャレットマージンを変更しました。私はそれを非常に正しくしたいと思っていました。

のcustom.css：

.sv-manage-multiselect-dropdown { 

     .btn-default { 
      background-image: none; 
      border: 1px solid #ADA9A9; 
      padding: 6px 8px 1px 8px ; 
      } 

     .btn .caret { 
      margin-left: 160px; 
      margin-bottom:5px; 
     } 
    } 

HTML：

<td class="col-xs-2"> 
    <am-multiselect class="sv-manage-multiselect-dropdown"  
        ng-model="Mylist.names" 
        options="Names.name for link in Mylist" 
        multiple="true"  
        ms-selected="{{Mylist.names}}"       
    </am-multiselect>   

</td> 

前：

後：

Answer 1

CSSでmax-widthを使ってみましたか？

max-width: 40px; 

たとえば、

希望すると便利です。

Answer 2

角度マルチセレクション/ src/multiselect.tmpl.htmlを見て、このCSSを追加すると、10pxがちょうどその例です。チェックマークの幅と高さを入れます。<i>は同じ場所空白：

.sv-manage-multiselect-dropdown { 
    ul.dropdown-menu > li > i{ 
     display: inline-block; 
     min-width: 10px; 
     min-height: 10px; 
    } 
}