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

bootstrap-multiselect options too long, overruns container

提问by KyleMit

I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page:

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

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

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

The code above works perfectly. The problem is that options with long text values overruns it's container boundaries as per the following screenshot, instead of wrapping over to a new line.

上面的代码完美运行。问题在于，根据以下屏幕截图，具有长文本值的选项超出了它的容器边界，而不是换行到新行。

How can I fix this? Preferably if there is a way to do it by simply altering my above .js code that would be a bonus.

我怎样才能解决这个问题？如果有一种方法可以通过简单地更改我上面的 .js 代码来实现，那将是一个奖励。

回答by KyleMit

By default, nothing should be applying a width to the .multiselect-container, so it will take up as much room as it needs in order to display all the items on a single line:

默认情况下，不应该对 应用宽度.multiselect-container，因此它将占用尽可能多的空间，以便在一行中显示所有项目：

If however, something is applying a width to the .multiselect-container, you'll encounter the problem you identified:

但是，如果某些东西对 应用了宽度.multiselect-container，您将遇到您确定的问题：

The problem is that bootstrap multiselect uses a dropdown-menu to which the bootstrap library applies the following code:

问题在于引导程序多选使用下拉菜单，引导程序库将以下代码应用于该下拉菜单：

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

In order to fix this, we can return white-space to it's normal wrapping mode with the following css:

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

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

Demo in jsFiddle

jsFiddle 中的演示

Couple more notes:

还有一些注意事项：

1. maxHeighttakes the number of pixels, so passing in 5will make the control only 5px high. You should pass in something like maxHeight: 200
2. enableCaseInsensitiveFilteringdoes the same thing as enableFilteringso you don't need both. Decide whether you want case sensitivity or not and then set either one to true

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

Update with further explanation

更新进一步解释

@user2105811, You do not need to target the label specifically and you do not need to use !importanthere's the HTML structure and CSS that is generated for this solution:

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

• Notice that white-spaceis always inherited from the parent, so targeting labelwill do the same thing as targeting a, but will address the problem at it's root.
• The original bootstrap code has the same degree of specificity as the selector being used to fix it. Meaning it will override it as long as your custom CSS is placed afterthe bootstrap css which should alwaysbe the case. If it's not working, I suspect you are not doing this.

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

回答by es1

Your suggestion to use:

您的使用建议：

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

doesn't work. Instead I added the label tag to the CSS and set it to !important. Now it works.

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

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