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

Question

我只想添加一个换行符，然后在按钮内将第二行加粗。该按钮恰好是一个 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;
}

Answer 1

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

但请务必通过额外的 class 或 ID 添加它，这样它就不会影响您的所有按钮。

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

Cannot get a linefeed AND bold to work in a HTML button

html

telerik