html - 如何在不更改按钮大小的情况下将文本包装在 Bootstrap 按钮内？

Question

我正在尝试在不更改按钮大小的情况下在 Bootstrap 按钮内换行或调整文本大小。我有几个必须对齐的按钮

我用过这个类，文本换行但按钮变大影响与其他按钮的对齐

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

有示例代码，只需调整 View 大小: https://jsfiddle.net/mrapi/3yv314dx/1/

谢谢

Answer 1

不确定为什么所有复杂的解决方案。

只需将以下内容添加到您的 .btn CSS:

white-space: normal;

因此，如果您的全局 css 文件中已有 .btn，请执行以下操作:

.btn {
    white-space: normal;
}

或者，如果您的全局 css 文件中没有任何内容，只需内联即可，例如:

<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>

Note: This method may not work on archaic versions of IE