Bootstrap 下拉菜单：如何使文本很好地换行答案

【问题标题】：Bootstrap dropdown: how to make text wrap nicelyBootstrap 下拉菜单：如何使文本很好地换行
【发布时间】：2020-07-09 04:56:58
【问题描述】：

我正在学习 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>

我没有下拉菜单，而是<div> 带有长文本和其他 html 标记。问题是我尝试了不同的 CSS 规则，而长文本要么超出 <div>，要么导致滚动条出现。我只希望长文本在<div> 中很好地换行，并根据文本量下降。

我该怎么做？

我是否以错误的方式使用“下拉菜单”组件？

【问题讨论】：

标签： twitter-bootstrap drop-down-menu

【解决方案1】：

只需将white-space: normal; 添加到您的.dropdown-menu

Example fiddle

【讨论】：

谢谢老兄的作品。与 word-break:break-all 斗争了半天
谢谢。有效。请注意，它必须在锚标记类中。

【解决方案2】：

在 .dropdown-menu 中向锚标记添加正常的空白对我有用，仅将其添加到 .dropdown-menu 不起作用。

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

【讨论】：

这对我也有用，我相信可能是因为原始问题的标记？我不知道，但谢谢！
用于垂直菜单... .nav-tabs .dropdown-menu li a {white-space: normal;}

【解决方案3】：

您可以将此类添加到您的下拉项目中。这将在必要时换行。

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

【讨论】：

【解决方案4】：

这是否接近您所追求的？
http://www.bootply.com/69776

您会看到我稍微更改了 HTML 并添加了一个 CSS 类来限制下拉菜单的宽度。 HTML 直接取自 the bootstrap site，并带有几个额外的按钮类。

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

希望这会有所帮助！

【讨论】：

【解决方案5】：

不完全回答 OP 的问题，但值得，因为这是谷歌上排名靠前的帖子，用于包装下拉文本。任何寻找快速解决方案的人都可以让事情看起来不错并且下拉菜单不会出现乱序，只需添加width（如this SO答案中所述）：

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

这修复了<select>（或用于下拉菜单的任何元素）的宽度

（请注意，下拉菜单中的项目仍然不会换行，但由于下拉菜单没有乱序，因此整体看起来更有序。此外，可能需要针对移动屏幕相应调整宽度）

【讨论】：