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

在您的div .flex__text周围添加一个外部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>中未对齐

1 个答案: