当在跨度中添加填充时，它给我错误的结果

Question

我正在尝试复制此内容。 我正在复制所有代码，当我运行html和CSS时，结果页面为

SELECT   *
FROM     patient1
ORDER BY blood_group LIKE '%-%' DESC, blood_group

.card{
position: relative;
}
.card__heading {
    font-size: 2.8rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 12rem;
    right: 2rem;
    width: 75%; }
  .card__heading-span {
    padding: 1rem 1.5rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; }
    .card__heading-span--1 {
      background-image: linear-gradient(to right, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); }

Answer 1

调整行高：

.card {
  position: relative;
}

.card__heading {
  font-size: 2.8rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
  width: 280px;
}

.card__heading-span {
  padding: 1rem 1.5rem;
line-height: 1.83em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.card__heading-span--1 {
  background-image: linear-gradient(to right, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85));
}

<div class="card">
  <h4 class="card__heading">
    <span class="card__heading-span card__heading-span--1">
          The sea explorer
      </span>
  </h4>
</div>

Answer 2

使用此CSS可能会对您有所帮助。

.card{
    position: relative;
    width: 30%;
}
.card__heading {
    font-size: 2.8rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 12rem;
    right: 2rem;
    width: 75%;
}
.card__heading-span {
    padding: 1rem 1.5rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    line-height: 1.84em;
}
.card__heading-span--1 {
    background-image: linear-gradient(to right, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85));
}