无法在 HTML 按钮中使用换行和粗体答案

【问题标题】：Cannot get a linefeed AND bold to work in a HTML button无法在 HTML 按钮中使用换行和粗体
【发布时间】：2021-05-29 10:06:00
【问题描述】：

我只想添加一个换行符，然后在按钮内将第二行加粗。该按钮恰好是 Telerik Kendo 按钮，但我认为这不是问题所在。大胆和坚强我都试过了。

                    <kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlagsRefresh(true)">Set Print<br /><b>TRUE</b></kendo-button>
                <kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlagsRefresh(false)">Set Print<br />FALSE</kendo-button>

我可以加粗或者换行....但不能同时使用！

该div的完整代码如下：

                <div class="col-10 text-center" style="border-style: solid; border-color: black; border-width: thin;">
                <b>Action Buttons --==></b>
                <kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlagsRefresh(true)">Set Print<b>TRUE</b></kendo-button>
                <kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlagsRefresh(false)">Set Print<br />FALSE</kendo-button>
                <kendo-button name="markComplete" type="button" onclick="markComplete(true)">Complete: True</kendo-button>
                <kendo-button name="markNotComplete" type="button" onclick="markComplete(false)">Complete: False</kendo-button>
                <kendo-button name="resetCheckDate" type="button" onclick="resetCheckDate()">Reset Chck Date &Aacute; Num To Blank</kendo-button>
                @*<kendo-button name="docolors" type="button" onClick="ChangeColors()">colors test</kendo-button>*@

            </div>

到目前为止，按钮的 CSS 很简单：

    .k-button {
    background-image: none;
    border-color: #f26730;
    border-width: 1px;
}

【问题讨论】：

Kendo 将display: flex 添加到他们的按钮中，以防止换行。您可以在按钮中添加 `flex-direction: column;`，它会将其拆分为 2 行，而无需 <br/>。
但如果我不使用粗体，换行符显然有效？
是的，因为你没有 2 个元素，所以 flex 不会对齐它们。
另外，使用 flex-direction 我如何告诉它“在哪里”中断？
你告诉它在哪里打破第二个元素（在你的情况下是 b 标签）

标签： html telerik

【解决方案1】：

Kendo 将display: flex 添加到它的按钮中，这将导致多个元素（在本例中为 b 标签）水平对齐。将flex-direction: column 添加到.k-button 类并保留b 标签将使b 标签位于按钮内部HTML 内容的其余部分下方。您甚至可以删除不再需要的换行符。

但请务必通过其他类或 ID 添加它，以免影响您的所有按钮。

【讨论】：