Twitter Bootstrap按钮文字词包 [英] Twitter Bootstrap Button Text Word Wrap

问题描述

对于我的生活，我无法得到这些twitter引导按钮文本换行到多行，他们看起来像这样。

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

[这是bu] tton文本

[This is the bu] tton text

它会显示为

[这是]

[button text]

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

任何帮助将非常感激。

编辑。我尝试添加 word-wrap：break-word; ，但它没有任何区别。

Edit. I have tried adding word-wrap:break-word; but it is not making any difference.

JSFiddle http://jsfiddle.net/TTKtb/ - 你需要它展开右列，使面板彼此相邻。

Edit. JSFiddle http://jsfiddle.net/TTKtb/ - You will need it expand the right column so the panels sit next to one another.

推荐答案

尝试这样：将 white-space：normal; 添加到Bootstrap按钮的样式定义或者您可以用下面的代码替换您显示的代码

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按钮文字词包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！