bootstrap-multiselect选项太长，超出容器

Question

我正在使用David Stutz's Bootstrap-Mutliselect。我使用以下代码将其连接到我页面中的所有选择元素：

$(function () {
    $("select").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { multiple: false }
    );

    $("[multiple]").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { enableCaseInsensitiveFiltering: true }
    );
});

上面的代码完美无缺。问题是具有长文本值的选项会按照以下屏幕截图覆盖容器边界，而不是换行到新行。

我该如何解决这个问题？最好是通过简单地改变上面的.js代码来实现它，这将是一个奖励。

Answer 1

默认情况下，没有任何内容应该为.multiselect-container应用宽度，因此为了在一行显示所有项目，它将占用所需的空间：

但是，如果某些内容正在应用.multiselect-container的宽度，您将遇到您发现的问题：

问题是bootstrap multiselect使用下拉菜单，bootstrap库应用以下代码：

.dropdown-menu>li>a { white-space: nowrap; }

为了解决这个问题，我们可以使用以下css将white-space返回到它的正常包装模式：

.multiselect-container > li > a { white-space: normal; }

Demo in jsFiddle

结合更多笔记：

1. maxHeight获取像素数，因此传入5将使控件仅高5px。你应该传递像maxHeight: 200
这样的东西
2. enableCaseInsensitiveFiltering与enableFiltering做同样的事情，所以你不需要两者。确定是否需要区分大小写，然后将其中一个设置为true

更新并进一步说明

@ user2105811，您不需要专门定位标签，也不需要在!important使用为此解决方案生成的HTML结构和CSS：



• 请注意，white-space始终是从父级继承的，因此定位label将执行与定位a相同的操作，但会在其根目录中解决问题。
• 原始引导代码与用于修复它的选择器具有相同的特异性。这意味着它将覆盖它，只要你的自定义CSS放在之后引导程序css，总是就是这种情况。如果它不起作用，我怀疑你没有这样做。

Answer 2

您的使用建议：

.multiselect-container > li > a { 
     white-space: normal;
}

不起作用。相反，我将标签标签添加到CSS并将其设置为！important。现在它有效。

.multiselect-container > li > a > label{
    white-space: normal !important;
}