Twitter Bootstrap 按钮文本自动换行

Posted 2023-03-05

【中文标题】Twitter Bootstrap 按钮文本自动换行

【英文标题】：Twitter Bootstrap Button Text Word Wrap

【发布时间】：2013-09-30 12:43:58

【问题描述】：

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

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

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

【问题讨论】：

你能创建 jsfiddle 或一些测试吗？？

为什么不在要插入换行符的地方插入<br>？

不可行，因为按钮的内容会随着从数据库中加载而有所不同。

另一种方式jsfiddle.net/TTKtb/4

如果您在希望文本换行的位置插入 ，您会得到一个换行符并且文本换行。我知道当您有很多文本时这不是一个解决方案，但是当您想要包装三四个单词时这可能会有所帮助！

【参考方案1】：

试试这个：将 white-space: normal; 添加到引导按钮的样式定义中，或者您可以将显示的代码替换为下面的代码

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

我已经更新了你的小提琴 here 来展示它是如何产生的。

【讨论】：

啊，哇。刚查了一下。甚至不知道 CSS 代码的存在。谢谢你的帮助！花了几个小时试图解决这个问题。

@user2063032 我认为这个人最能解释空白link。

不用担心，我每天都从 *** 中学到一些东西。此外，您还会注意到，如果元素（即按钮）具有指定宽度，则 white-space 属性效果很好。

@user2063032 如果答案已经解决了您的问题，请接受。谢谢:)

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

【参考方案2】：

您可以简单地添加此类。

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

【讨论】：

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

【参考方案3】：

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

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

【讨论】：

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

【参考方案4】：

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