Twitter引导程序按钮文本自动换行

在我的生活中，我无法让这些Twitter引导按钮将文本换行到多行，它们看起来是这样的。

我不能发布图片，所以这就是它正在做的……

[这是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;，但没有任何区别。

编辑。JSFiddlehttp：//jsfiddle.net/ttktb/-您将需要它来扩展右列，以便面板彼此相邻。

148536 次浏览
小开
最佳答案

试试这个：将空白：正常；添加到引导按钮的样式定义中，或者您可以将显示的代码替换为下面的代码

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

我已经更新了你的小提琴在这里，以显示它是如何出来的。

小开

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

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

您可以添加这些样式的，它的工作就像预期的那样。

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

在 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


提交答案