twitter-bootstrap Bootstrap 下拉菜单：如何使文本更好地换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17882384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown: how to make text wrap nicely
提问by curious1
I am learning Bootstrap. I would like to have a button with dropdown such as the following:
我正在学习 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>
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.
而不是下拉菜单，我有<div>长文本和其他 html 标签。问题是我尝试了不同的 CSS 规则，而长文本要么超出了 ，<div>要么导致滚动条出现。我只希望长文本很好地包裹在里面，<div>并根据文本量下降。
How can I do this?
我怎样才能做到这一点？
Am I using "dropdown-menu" component the wrong way?
我是否以错误的方式使用“下拉菜单”组件？
回答by koala_dev
Just add white-space: normal;to your .dropdown-menu
只需添加white-space: normal;到您的.dropdown-menu
回答by createscape
Adding white-space normal to the anchor tag within .dropdown-menu worked for me, adding it just to .dropdown-menu didn't work.
向 .dropdown-menu 中的锚标记添加法线空白对我有用，仅将其添加到 .dropdown-menu 不起作用。
.navbar .nav li .dropdown-menu li a {white-space: normal;}
回答by Ali Seivani
you can add this class to your dropdown items. This will wrap text when necessary.
您可以将此类添加到下拉项中。这将在必要时换行文本。
.dropdown-item {
white-space: pre-wrap;
}
回答by David Taiaroa
Is this close to what you are after?
http://www.bootply.com/69776
这接近你所追求的吗？
http://www.bootply.com/69776
You will see I've changed the HTML slightly and added a CSS class to limit the width of the dropdown. The HTML is taken directly from the bootstrap sitewith a couple of extra classes for the button.
您会看到我稍微更改了 HTML 并添加了一个 CSS 类来限制下拉列表的宽度。HTML 直接从引导站点获取，并为按钮添加了几个额外的类。
HTML
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.
Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英。Vestibulum non nulla eu dui imperdiet eleifend in vel ligula。Ut tempor gravida leo。sed intellus justo。Nam vel nisl nulla。Proin sagittis semper nunc et vehicula。Proin quam lacus，feugiat quis diam in，malesuada posuere odio。整数 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 等。Nullam eget orci et mauris lacinia sollicitudin non vel felis。Praesent eleifend risus et libero ultrices facilisis。
CSS
CSS
.dropdown-menu{
max-width:300px;
}
Hope this helps!
希望这可以帮助！
回答by Anupam
Not exactly answering OP's questions but worth it since this is the well-ranked post on Google to wrap text for dropdowns. Anyone looking for a quick solution that just makes thing look nice and the dropdown not appearing out of order, can just add a width(as mentioned in thisSO Answer):
不完全回答 OP 的问题，但值得，因为这是谷歌上排名靠前的帖子，用于为下拉菜单包装文本。任何寻求快速解决方案的人都可以使事情看起来不错并且下拉菜单不会出现乱序，只需添加一个width（如本SO Answer 中所述）：
<select id="something" class="bootstrap-select" style="width: 200px;">
This fixes the width of the <select>(or whatever element being used for the dropdown)
这修复了<select>（或用于下拉列表的任何元素）的宽度
(Please note that the items in the dropdown will still not wrap but the whole thing looks more orderly since the dropdown is not going out of order. Also, the width may need to be adjusted accordingly for mobile screens)
（请注意，下拉列表中的项目仍然不会换行，但由于下拉列表没有乱序，所以整个事情看起来更有序。此外，可能需要针对移动屏幕相应地调整宽度）
