Bootstrap下拉菜单：如何使文本自动换行？

Question

我正在学习Bootstrap。我想要一个带有下拉菜单的按钮，就像以下这样:

<div class="btn-group">
  <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <div class="dropdown-menu" style="width: 300px;">
    <div >

  Long text goes here.

    </div>
  </div>
</div>

我有一个包含长文本和其他html标签的<div>，而不是下拉菜单。问题在于，我尝试了不同的CSS规则，但长文本要么超出了<div>的范围，要么会出现滚动条。我只想让长文本在<div>内漂亮地换行，并根据文本量向下延伸。

我该如何解决这个问题？

我是否误用了 "dropdown-menu" 组件?

- curious1

Answer 1

只需将 .dropdown-menu 添加 white-space: normal; 样式即可。

示例代码

- omma2289

---

谢谢，伙计。这个可行。我已经半天在与 word-break:break-all 搏斗了。 - teenage vampire

谢谢。它起作用了。只是需要注意，它必须放在锚标签类中。 - Ron B

Answer 2

在.dropdown-menu内添加white-space:normal到锚点标签对我有效，只添加到.dropdown-menu并没有效果。

.navbar .nav li .dropdown-menu li a {white-space: normal;}

- createscape

---

这对我也起作用了，我认为可能是因为原始问题的标记？我不知道，但谢谢！ - Leo

在一个垂直菜单中使用....nav-tabs .dropdown-menu li a {white-space: normal;} - trf

Answer 3

您可以将此类添加到下拉项中。这将在必要时包裹文本。

.dropdown-item {
  white-space: pre-wrap;
}

- Ali Seivani

Answer 4

这与您所需的接近吗？
http://www.bootply.com/69776

您会发现我稍微更改了HTML，并添加了一个CSS类以限制下拉菜单的宽度。 HTML直接取自Bootstrap网站，还有一些额外的按钮类。

HTML

<div class="dropdown">
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
  non nulla eu dui imperdiet eleifend in vel ligula. Ut tempor gravida 
  leo. Sed in tellus justo. Nam vel nisl nulla. Proin sagittis semper 
  nunc et vehicula. Proin quam lacus, feugiat quis diam in, malesuada 
  posuere odio. Integer pharetra sed ante eget posuere. Nullam a 
  dapibus leo, vitae gravida ligula. Praesent consectetur lorem et 
  pellentesque imperdiet. Suspendisse vitae libero auctor, pharetra 
  nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus 
  aliquet et. Nullam eget orci et mauris lacinia sollicitudin non vel 
  felis. Praesent eleifend risus et libero ultrices facilisis.
</ul>
</div>

CSS

 .dropdown-menu{
 max-width:300px;
 }  

希望这可以帮助你！

- David Taiaroa

Answer 5

虽然这并不完全回答了楼主的问题，但由于这是谷歌排名较高的帖子之一，因此仍然值得一提。任何想要快速解决问题，只需添加一个width属性（如this SO答案中所述），就可以使下拉菜单看起来更美观，而且不会出现错位的情况。

<select id="something" class="bootstrap-select" style="width: 200px;">

这将固定下拉菜单的宽度，包括 <select> 元素（或任何用于下拉菜单的元素）。

请注意，下拉菜单中的项目仍然不会换行，但整个菜单看起来更有序，因为下拉菜单不会超出范围。此外，对于移动屏幕，可能需要相应地调整宽度。

- Anupam