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

我正在尝试的

我想固定下拉菜单的宽度，即引导中的

ul.下拉菜单

错误

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

JSFiddle

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

代码

<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是引导程序的正常语法

它看起来怎么样

列表项关于固定

ul.下拉菜单

的宽度“>

我希望它看起来怎么样

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

我尝试过的

所有这些都不起作用

将

display:block；

添加到小车

li

（内容溢出的那一个）和车内的

tang

wordbreak

到小车

li

和

小车

li

和

的最大宽度

将

display:table；

添加到

ul。下拉菜单

将删除其下拉功能，并使其宽度增加，从而完全包裹小车

li

---

添加了一个

此处需要的是a标记上的空白属性：

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

此处需要的是a标记上的空白属性：

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

试着换掉这个

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



很有帮助，我喜欢空白。
尝试替换这个

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



非常有用，我喜欢空白。
你能从
下拉菜单中删除
空白：nowrap；
吗>到
你能从
下拉菜单中删除
空白：nowrap；
吗？或者将
空白：正常；
设置为
@Ex-iT-Awesome！完全有效。谢谢。你应该将其作为答案发布。很高兴它有效！@user3253746现在将其作为答案发布，谢谢：）所有答案都是正确的（也是一样）。不幸的是，我无法将所有答案都标记为已接受的答案。因此我将使用Ex iT的答案，因为他是第一个回答我问题的人（尽管是在评论中）。您可以从
下拉菜单中删除
空白：nowrap；
吗？或者将
空白：normal；
设置为
@Ex-iT-some！完全有效。谢谢。您应该将其作为答案发布。很高兴它有效！@user3253746现在将其作为答案发布，谢谢：）所有答案都是正确的（并且相同）。不幸的是，我无法将所有答案都标记为已接受的答案。因此，我将使用Ex iT的答案，因为他是第一个回答我问题的人（尽管是在评论中）。