javascript - 引导多选选项太长，溢出容器

Question

我正在使用David Stutz 的 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，您将遇到您发现的问题：

问题是引导多选使用引导库应用以下代码的下拉菜单：

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

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

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

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;
}