Html Twitter Bootstrap 按钮文本自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18996202/
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
Twitter Bootstrap Button Text Word Wrap
提问by M_Becker
For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines, they appearing like so.
对于我的生活，我无法让这些 twitter bootstrap 按钮将文本换行到多行，它们看起来像这样。
I cannot post images, so this is what it is doing...
我不能发布图片，所以这就是它在做什么......
[This is the bu] tton text
[这是按钮] tton 文本
I would like it to appear like
我希望它看起来像
[This is the ]
[这是]
[button text ]
[按钮文字]
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
</div>
</div>
Any help would be much appreciated.
任何帮助将非常感激。
Edit. I have tried adding word-wrap:break-word;but it is not making any difference.
编辑。我试过添加，word-wrap:break-word;但没有任何区别。
Edit. JSFiddle http://jsfiddle.net/TTKtb/- You will need it expand the right column so the panels sit next to one another.
编辑。JSFiddle http://jsfiddle.net/TTKtb/- 您将需要它展开右列，以便面板彼此相邻。
回答by Brian Kinyua
Try this: add white-space: normal;to the style definition of the Bootstrap Button or you can replace the code you displayed with the one below
试试这个：添加空格：正常；到 Bootstrap 按钮的样式定义，或者您可以用下面的代码替换您显示的代码
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
</div>
</div>
I have updated your fiddle hereto show how it comes out.
我在这里更新了你的小提琴以展示它是如何产生的。
回答by Getsomepeaches
You can simply add this class.
你可以简单地添加这个类。
.btn {
white-space:normal !important;
word-wrap: break-word;
}
回答by chickens
You can add these style's and it works just as expected.
您可以添加这些样式，它会按预期工作。
.btn {
white-space:normal !important;
word-wrap: break-word;
word-break: normal;
}
回答by hwjp
FWIW, in Boostrap 4.4, you can add .text-wrapstyle to things like buttons:
FWIW，在 Boostrap 4.4 中，您可以.text-wrap为按钮之类的东西添加样式：
<a href="#" class="btn btn-primary text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow
https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow
