html - 是否可以使用 HTML 和 CSS 在两行中使用不同字体的按钮文本？

Question

使用 HTML 中的属性值，我无法使按钮文本在两行以及不同的字体大小中工作

我已经在 css 中尝试过空格，但它更像是自动换行，这并不能解决我的问题。我也尝试使用 & 号-hash13；和 &-hash10; 但它也不起作用。

@media (min-height: 280px) {
.divNumKeypad {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
.numberBtn{
    font-size: 30px;
    height: 68px;
}

<div class="col-xs-4 ">
    <input id="btnEight" type="button" tabindex="-1" value="HI HELLO" class="btn btn-primary btn-block numberBtn" onclick="buttonClick(8)" />
</div>

我希望有一个带有两行文本的按钮。“HI”应该在第一行，字体较大，底部文本“HELLO”应该小于顶部文本。

标签： htmlcss

Answer 1

在下面试试这个

@media (min-height: 280px) {
  .line-1,  {
    display:block;
    font-size: 20px
  }

  .line-2 {
    display: block;
    font-size: 10px;
  }
}

<div class="col-xs-4 ">
  <button>
    <span class="line-1">HI</span>
    <span class="line-2">HELLO</span>
  </button>
</div>