通过固定宽度的下拉菜单防止内容溢出

Question

我正在尝试

我想在Bootstrap中修改下拉菜单即 ul.dropdown-menu的宽度。

错误

如果列表项的内容很长，则会通过下拉菜单溢出。

的jsfiddle

http://jsfiddle.net/96fwK/

代码

<ul class="dropdown-menu" role="menu" aria-labelledby="drop3" style="width:400px;">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <!-- Below is the buggy list-item -->
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">A very long content overflows 
            the list-item if ul.dropdown-menu's width is fixed
        </a>
    </li>
</ul>

在第一行，我得到了style="width:400px;"。 Rest all是Bootstrap的正常语法。

外观如何

我希望它看起来如何

我希望长内容分成新行，以便它看起来像这样：

我尝试了什么

所有这些都没有用。

1. 将display: block;添加到错误 li（内容溢出的内容）和内部的<a>内容。
2. word-break到 buggy li和<a>。
3. max-width到 buggy li和<a>。
4. 将display: table;添加到ul.dropdown-menu会删除其下拉功能并导致其宽度增加，以便完全包装错误 li。
5. 在错误 <div style="display:block;>"中添加li以包装内容。
6. display: block !important;到 buggy li。
7. 添加display: block; to ul.dropdown-menu`也会删除下拉功能。
8. 我还搜索了SO和Google的答案。

我不想要

1. 截断内容并添加省略号。
2. 添加滚动条或隐藏内容。

Answer 1

您可以从white-space: nowrap;删除.dropdown-menu>li>a吗？或者将white-space: normal;设置为<a>。

Answer 2

这里需要的是标签上的空白区域：

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

Answer 3

尝试替换此

<a role="menuitem" tabindex="-1" href="#" style="word-wrap:break-all">
    A very long content overflows the list-item if ul.dropdown-menu's width is fixed
</a>

有了这个：

<a role="menuitem" tabindex="-1" href="#" style="white-space:normal">
    A very long content overflows the list-item if ul.dropdown-menu's width is fixed
</a>

White-space非常有帮助，我喜欢白色空间。