带有2行文本的按钮比带有1行文本的按钮大，但我需要它们与1行的大小相同

Question

the buttons on my site are sizing up based on how much text there is. when there is 2 lines the buttons are larger than the buttons with 1 line. how can i fix this?

this was fixed at one point but broke again. and this is certainly not all the code for it,

.wp-block-column {
  margin-bottom: 0;

  @include desktop {
    height: 138px;
    height: 252px;
    flex-basis: auto;
    font-size: 30px;
    line-height: 36px;
    width: 357px;
    height: 238px;
  }
}

.wp-block-button {
  height: 100%;
}

.wp-block-button__link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-block-columns {
  justify-content: center;
}

.all-button {
  border-radius: 1rem;

  text-transform: uppercase;
  text-align: center;
  font-family: 'Lato-Bold';
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    opacity: 0.5;
  }

  @include desktop {
    width: 355px;
    margin: 0;
    font-size: 1.67rem;
    margin: $base__space-unit;

    border-radius: 8px;

    a {
      font-size: 30px;
      height: 100%;
      width: 100%;
      #text {
        margin: auto;
      }
    }
  }
}

i expect all the buttons to be the same size

Answer 1

Give them exact height Ex.

.all-button {
  height: 42px; //Put here size you want
}

or Give white-space: nowrap;