Twitter Bootstrap按钮文本换行

Question

Twitter Bootstrap按钮文本换行

htmlcsstwitter-bootstrap

196

我费尽心思也无法让这些 Twitter 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;">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/ - 您需要展开右列以使面板并排放置。

- M_Becker

1

你能创建一个 JSFiddle 或者一些测试吗？ - Javascript Coder

1

为什么不在需要插入换行的地方插入“<br>”呢？ - ntalbs

由于从数据库加载的按钮内容会有所不同，因此这种方法不可行。 - M_Becker

另一种方法 http://jsfiddle.net/TTKtb/4/ - Javascript Coder

如果您在文本需要换行的位置插入一个 <br> 标签，则可以得到一个换行符并使文本换行。我知道当您有大量文本需要处理时，这不是解决方案，但是当您只有三四个单词需要换行时，这可能会有所帮助！ - pebox11

4个回答

74

您可以简单地添加这个类。

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

- Getsomepeaches

7

我也需要 word-break: normal 覆盖 Bootstrap 设置的值。但这样就完美解决了！ - crowmagnumb

6

值得一提的是，在 Bootstrap 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

2

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

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

- chickens

使用内联样式只能让您为该按钮修复此问题。将其添加到类中，以便您可以在整个项目中使用它。在锚点上的类中使用col定义将被视为不良实践，而使用Bootstrap则不会。 - Getsomepeaches

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Kinyua · Accepted Answer

尝试这样做：将 white-space: normal; 添加到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>

我已经更新了你的示例此处，以展示它的输出结果。