Ограничить текст, отображаемый на кнопке

Question

У меня есть кнопка выгрузки бутстрапа. Я хочу ограничить отображение текста в кнопке после того, как я выберу элемент в раскрывающемся списке, чтобы кнопка не расширялась. (например, некоторые дети ..., а не некоторые дети в школе) Kinda, как max-width, но установка max-width, похоже, не работает. У меня есть скрипка here, но я не могу заставить ее работать с выпадающими элементами. То же самое со встроенным кодом ниже

$('#clientGroups li').on('click', function() { 
 
      $('#spnSelectedGroup').text($(this).text()); 
 
     });

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group "> 
 
    <div class="input-group-btn"> 
 
    <button id="btnClientGroups" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="spnSelectedGroup">Groups</span> <span class="caret"></span> 
 
    </button> 
 
    <ul id="clientGroups" class="dropdown-menu"> 
 
     <li><a href="#">Action</a> 
 
     </li> 
 
     <li><a href="#">Another action</a> 
 
     </li> 
 
     <li><a href="#">Something else here</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    
 
</div>

Answer 1

с помощью CSS вы можете установить фиксированную ширину на внутренний текст и добавить многоточие с text-overflow: ellipsis

#btnClientGroups > span { 
    display: inline-block; 
    vertical-align: middle; 
} 

#spnSelectedGroup { 
    width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

jsfiddle