h2元素的列占用最大宽度，如何防止？

Question

我有一列 H2 元素，我使用 CSS 变换对其进行旋转。由于某种原因，最短的 H2 元素占据了最长的 H2 元素的宽度。我该如何预防这种情况？

.title {
  margin-top: -30px;
  font-size: calc(17px + (0.01* 100vw));
}

.slogan {
  background-color: #29335cff;
}


/* TEXT FLIPPER */

.text-container {
  height: 2.45rem;
  background-color: transparent;
  overflow: hidden;
}

.text-flip {
  animation: text-flip 5s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
}

.text-flip h2 {
  background-color: #29335cff;
}

@keyframes text-flip {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-77%);
  }
  40% {
    transform: translateY(-50%);
  }
  60% {
    transform: translateY(-25%);
  }
  100% {
    transform: translateY(0);
  }
}

<div class='title d-flex'>

  <div class='px-2 slogan'>
    <h2>
      TAP COCKTAILS MADE
    </h2>
  </div>

  <div class='text-container '>
    <div class='text-flip d-flex justify-content-start flex-column'>
      <h2 class=''>EASY</h2>
      <h2 class=''>PROFITABLE</h2>
      <h2 class=''>TASTY</h2>
      <h2 class=''>YOUR OWN</h2>
    </div>
  </div>
</div>

Answer 1

标题是块元素，因此它们采用全宽。

我能想到两种解决方案。 首先，您可以通过添加 display: inline-block 属性将 h2 转换为 inline-block，但这会扭曲布局。

其次，您可以在h2标签内添加span标签。 例如：

<div class='title d-flex'>

  <div class='px-2 slogan'>
    <h2>
      TAP COCKTAILS MADE
    </h2>
  </div>

  <div class='text-container '>
    <div class='text-flip d-flex justify-content-start flex-column'>
       <h2 class=''><span>EASY</span></h2>
      <h2 class=''><span>PROFITABLE</span></h2>
       <h2 class=''><span>TASTY</span></h2>
       <h2 class=''><span>YOUR OWN</span></h2>
    </div>
  </div>
</div>

.title {
  margin-top: -30px;
  font-size: calc(17px + (0.01* 100vw));
}

.slogan {
  background-color: #29335cff;
}


/* TEXT FLIPPER */

.text-container {
  height: 2.45rem;
  background-color: transparent;
  overflow: hidden;
}

.text-flip {
  animation: text-flip 5s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
}

.text-flip h2 span {
  background-color: #29335cff;
}
.text-flip h2:after {
   content: '';
   display: block;
}

@keyframes text-flip {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-77%);
  }
  40% {
    transform: translateY(-50%);
  }
  60% {
    transform: translateY(-25%);
  }
  100% {
    transform: translateY(0);
  }
}