![按钮文本自动换行]( "按钮文本自动换行")
本文介绍了Twitter Bootstrap 按钮文本自动换行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的一生中，我无法让这些 twitter 引导按钮将文本换行到多行，它们看起来像这样.
我不能发布图片，所以这就是它正在做的......
[这是按钮] tton 文本
我希望它看起来像
[这是]
[按钮文字]
<!-- 第一列--><div class="panel panel-default"><div class="panel-body"><h4>发布于</h4><p>2013 年 9 月 22 日</p><h4>标签</h4><a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sat amet, consectetur adipiscing elit.</a><a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sat amet, consectetur adipiscing elit.</a><a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sat amet, consectetur adipiscing elit.</a>
任何帮助将不胜感激.
编辑.我尝试添加 word-wrap:break-word; 但它没有任何区别.
编辑.JSFiddle http://jsfiddle.net/TTKtb/ - 您将需要它展开右列，以便面板彼此相邻.
解决方案
试试这个:在 Bootstrap Button 的样式定义中添加 white-space: normal; 或者你可以替换你显示的代码与下面的一个
<!-- 第一列--><div class="panel panel-default"><div class="panel-body"><h4>发布于</h4><p>2013 年 9 月 22 日</p><h4>标签</h4><a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sat amet, consectetur adipiscing精英<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sat amet, consectetur adipiscing精英<a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sat amet, consectetur adipiscing精英
我已经在这里更新了你的小提琴，以展示它是如何产生的.
For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines, they appearing like so.
I cannot post images, so this is what it is doing...
[This is the bu] tton text
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.
Edit. JSFiddle http://jsfiddle.net/TTKtb/ - You will need it expand the right column so the panels sit next to one another.
解决方案
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
<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 here to show how it comes out.
这篇关于Twitter Bootstrap 按钮文本自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！