Bootstrap 下拉菜单:如何使文本更好地换行 [英] Bootstrap dropdown: how to make text wrap nicely

问题描述

我正在学习 Bootstrap.我想要一个带有下拉菜单的按钮，如下所示:

<a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">行动<span class="caret"></span></a><div class="dropdown-menu" style="width: 300px;"><div >长文本在这里.

不是下拉菜单，而是带有长文本和其他 html 标签的

.问题是我尝试了不同的 CSS 规则，而长文本要么超出了 <div> ，要么导致滚动条出现.我只希望长文本在 <div> 中很好地换行，并根据文本量下降.

我该怎么做?

我是否以错误的方式使用下拉菜单"组件?

解决方案

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

示例小提琴

I am learning Bootstrap. I would like to have a button with dropdown such as the following:

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

Instead of dropdown menu, I have <div> with long text and other html tags. The problem is that I tried different CSS rules and the long text either extends beyond the <div> or causes scroll bars to show up. I just want the long text wrap nicely within the <div> and goes down depending on the amount of text.

How can I do this?

Am I using "dropdown-menu" component the wrong way?

解决方案

Just add white-space: normal; to your .dropdown-menu

Example fiddle

这篇关于Bootstrap 下拉菜单:如何使文本更好地换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！