悬停溢出上的文本未在 <a> 内对齐

Question

我们有几个磁贴要用来显示一些文本。在悬停每个图块时，我们希望显示一个隐藏的 <div> 元素。但是，我们发现在 <a> 标签内使用时，文本会溢出并且无法正确对齐。

问题：

我们如何防止文本在 <a> 元素内溢出？

当前输出：

期望输出：

我们尝试过但没有奏效的方法

.flex__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex__col {
  border: 1px solid black;
  padding: 16px;
  margin: 16px;
 position: relative;
}

.flex__link:hover > .flex__text__wrapper {
  display: inline-block;
}

a {
 text-decoration: none;
}
.flex__text__wrapper {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: black;
 color: white;
 padding: 8px;
}

.flex__text {
 display: flex;
 align-items: flex-start;
}

<div class="flex__container">
 <div class="flex__col">
   <a href="#test" class="flex__link">
     <div>Data Sheet</div>
     <div>Progressively fabricate market-driven</div>
     <div class="flex__text__wrapper flex__white bkg--black">
       <div class="flex__text">
       Compellingly plagiarize interoperable bandwidth whereas holistic content.
       </div>
     </div>
   </a>
 </div>
   <div class="flex__col">
   <a href="#test"  class="flex__link">
     <div>Data Sheet</div>
     <div>methodologies rather than</div>
     <div class="flex__text__wrapper flex__white bkg--black">
       <div class="flex__text">
       Single, Optimized System Improves Productivity
       </div>
     </div>
   </a>
 </div>
  <div class="flex__col">
   <a href="#test" class="flex__link">
     <div>Data Sheet</div>
     <div>resource sucking schemas. Energistically initiate</div>
     <div class="flex__text__wrapper flex__white bkg--black">
       <div class="flex__text">
       Complete operational and commercial readiness.
       </div>
     </div>
   </a>
 </div>
  <div class="flex__col">
   <a href="#test" class="flex__link">
     <div>Data Sheet</div>
     <div>Seamlessly optimize empowered</div>
     <div class="flex__text__wrapper flex__white bkg--black">
       <div class="flex__text">
       Maximize productivity and protect roaming and interconnection business profitability. Maximize productivity and protect roaming and interconnection business profitability. Maximize productivity and protect roaming and interconnection business profitability.
       </div>
     </div>
   </a>
 </div>
</div>

我们尝试在 flex__col 元素上设置固定高度，但由于 flex__text 元素中的文本不同，因此很难找到一个有效的值。我们希望能够获得期望的结果，即不会显示任何溢出的内容，而不是像 current output.

Answer 1

在你的.flex__textdiv周围添加一个外div，给它height: 100%; overflow: hidden;

我已将它添加到您的问题所在的最后一个。

.flex__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex__col {
  border: 1px solid black;
  padding: 16px;
  margin: 16px;
  position: relative;
}

.flex__link:hover>.flex__text__wrapper {
  display: inline-block;
}

a {
  text-decoration: none;
}

.flex__text__wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  color: white;
  padding: 8px;
}

.flex__text__outer {
  height: 100%;
  overflow: hidden;
}

.flex__text {
  display: flex;
  align-items: flex-start;
}

<div class="flex__container">
  <div class="flex__col">
    <a href="#test" class="flex__link">
      <div>Data Sheet</div>
      <div>Progressively fabricate market-driven</div>
      <div class="flex__text__wrapper flex__white bkg--black">
        <div class="flex__text">
          Compellingly plagiarize interoperable bandwidth whereas holistic content.
        </div>
      </div>
    </a>
  </div>
  <div class="flex__col">
    <a href="#test" class="flex__link">
      <div>Data Sheet</div>
      <div>methodologies rather than</div>
      <div class="flex__text__wrapper flex__white bkg--black">
        <div class="flex__text">
          Single, Optimized System Improves Productivity
        </div>
      </div>
    </a>
  </div>
  <div class="flex__col">
    <a href="#test" class="flex__link">
      <div>Data Sheet</div>
      <div>resource sucking schemas. Energistically initiate</div>
      <div class="flex__text__wrapper flex__white bkg--black">
        <div class="flex__text">
          Complete operational and commercial readiness.
        </div>
      </div>
    </a>
  </div>
  <div class="flex__col">
    <a href="#test" class="flex__link">
      <div>Data Sheet</div>
      <div>Seamlessly optimize empowered</div>
      <div class="flex__text__wrapper flex__white bkg--black">
        <div class="flex__text__outer">
          <div class="flex__text">
            Maximize productivity and protect roaming and interconnection business profitability. Maximize productivity and protect roaming and interconnection business profitability. Maximize productivity and protect roaming and interconnection business profitability.
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

悬停溢出上的文本未在 <a> 内对齐

Text on hover overflows doesn't align within <a>

html

css

flexbox

responsive-design