Bootstrap 多选选项的完整显示被剪裁为下拉菜单的设置宽度

Question

我正在使用 david stutz 的 bootstrap multiselect，我想限制下拉菜单的最大宽度，并在选项描述超出该宽度时提供水平滚动条。

听起来很简单 - 但是，当实际 selected 选项时会出现问题。 selected 显示在 window 的宽度处被截断。我正在尝试使用 selected 选项来填充下拉列表而不是将其截断。

我修改了我发现的 fiddle 来证明这个问题。如果你selectCheeseeeeeeeeeeeeeee，然后向右拉水平滚动条，文本和蓝色悬停被截断。

$(function() {
        $('.multiselect').multiselect();
    });

.multiselect-container {
    max-width: 15px;
    overflow: auto;
    }

<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<select class="multiselect" multiple="multiple">
    <option value="cheese">    Cheeseeeeeeeeeeeeeee     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
</select>

我是不是遗漏了什么明显的东西？或者这是 multiselect?

的错误

Answer 1

你可以设置这个属性

.multiselect-container>li{
display:table-row;
}

它会起作用

Bootstrap 多选选项的完整显示被剪裁为下拉菜单的设置宽度

Bootstrap multiselect full display of options is clipped for set width on a dropdown

html

javascript

css

jquery

bootstrap-multiselect