Twitter Bootstrap按钮文本自动换行

186

在我的一生中，我无法获得这些twitter twitter bootstrap按钮来将文本换行多行，它们看起来像这样。

我无法发布图片，所以这就是正在做的...

[这是bu] tton文本

我希望它看起来像

[这是]

[按钮文字]

<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/-您将需要它扩展右列，以便面板彼此相邻。

— 贝克尔
source

您可以为此创建jsfiddle或进行一些测试吗？

— Javascript编码器2013年

1

为什么不插入<br>要插入换行符的位置？

— ntalbs 2013年

不可行，因为按钮的内容会随着从数据库加载而变化。

— M_Becker 2013年

另一方式jsfiddle.net/TTKtb/4

— Javascript Coder

如果在要包裹文本的位置插入<br>，则会出现换行符并包裹文本。我知道当您有很多文本时这不是解决方案，但是当您要包装三个或四个单词时这可能会有所帮助！

— pebox11 2015年

359

试试这个：添加空格：正常；替换为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>

我在这里更新了您的小提琴以显示结果。

— 布赖恩·金尤亚
source

啊，哇。只是抬头。甚至都不知道CSS代码存在。谢谢你的帮助！花了几个小时尝试解决这个问题。

— M_Becker 2013年

4

@ user2063032我认为这个人可以最好地解释空白链接。

— Brian Kinyua

不用担心，我每天都会从stackoverflow中学到一些东西。此外，您还会注意到，如果元素（即按钮）具有指定的宽度，则空白属性可以很好地发挥作用。

— Brian Kinyua

@ user2063032如果答案已解决您的问题，请接受。谢谢：）

— Brian Kinyua

2

几年后...又为我节省了##小时。谢谢。

— 妮·西兰

67

您可以简单地添加此类。

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}

— Getsomepeaches
source

5

我还需要word-break: normal覆盖引导程序设置的值。但后来它发挥了魅力！

— crowmagnumb 2015年

1

您可以添加这些样式，它可以按预期工作。

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}

— 鸡
source

使用内联样式只会允许您为那个按钮修复此问题。将其添加到类中，以便可以在整个项目中使用它。在使用Bootstrap时，在锚点的类中使用col定义将被视为不良做法。

— Getsomepeaches

1

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

— hwjp
source