在我的一生中,我无法让这些 twitter Bootstrap 按钮将文本换行到多行,它们看起来像这样。
我无法发布图片,所以这就是它正在做的事情......
[This is the bu] tton 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>
任何帮助将不胜感激。
编辑。我已经尝试添加 word-wrap:break-word;
但它没有任何区别。
编辑。 JSFiddle http://jsfiddle.net/TTKtb/ - 您需要它展开右列,以便面板彼此相邻。
最佳答案
试试这个:将 white-space: normal; 添加到 Bootstrap Button 的样式定义中,或者您可以将显示的代码替换为下面的代码
<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>
我更新了你的 fiddle here展示它是如何产生的。
关于html - Twitter Bootstrap 按钮文本自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18996202/