html - 如何使用 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

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.

#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;
}