<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-12 long-multiselect__outer" style="width: 150px;"> <div class="input-group btn-group"> <span class="input-group-addon"> <i>icon</i> </span> <select class="form-control long-multiselect" multiple="multiple"> <option value="cheese">Short</option> <option value="tomatoes">Extremly long option that provide a bug in Chrome</option> </select> </div> </div> <div class="col-md-12 long-multiselect__outer" style="width: 200px;"> <div class="input-group btn-group"> <span class="input-group-addon"> <i>icon</i> </span> <select class="form-control long-multiselect" multiple="multiple"> <option value="cheese">Short</option> <option value="tomatoes">Extremly long option that provide a bug in Chrome</option> </select> </div> </div> </div> </div> <script src="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script> <link href="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet">

.long-multiselect__outer { border: 1px dotted #ccc; padding: 5px; margin: 10px; } .long-multiselect__outer .multiselect-selected-text { text-align: left; padding-left: 10px; } .multiselect-container.dropdown-menu { max-width: 200%; } .multiselect-container.dropdown-menu li a label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

$('.long-multiselect').multiselect({ buttonWidth: '100%', numberDisplayed: 1 });