如何使用CSS在Bootstrap按钮中添加新行

Question

使用Bootstrap如何使用CSS将按钮的字幕缩小到新行。

我的按钮由按钮文本和按钮字幕组成。按钮字幕位于小标签中。

我不想使用html BR，我一直试图在CSS中这样做。

使用BR的HTML

<a id="option_button" class="btn btn-success" >Button Text<br/><small>This is the sub-title of the button</small></a>

使用CSS的HTML

<a id="option_button" class="btn btn-success" >Button Text<small>This is the sub-title of the button</small></a>

CSS

#option_button small {
    clear:left;
}

Answer 1

一种选择是将white-space: pre添加到父元素。

Example Here

这样，HTML中的新行将得到尊重。

  

MDN - white-space: pre

     

保留空白的序列，仅在源中的换行符和<br>元素处断行。

#option_button {
    white-space: pre;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<a id="option_button" class="btn btn-success">Button Text
    <small>This is the sub-title of the button</small>
</a>

---

当然，您也可以制作small元素block级别。

Example Here

#option_button small {
    display: block;
}

---

另一种选择是使用伪元素：

Example Here

#option_button small:before {
    content: "\A";
    white-space: pre;
}

Answer 2

将您的CSS更改为：

#option_button small {
    display: block;
}