悬停溢出的文本在 <a> 内不对齐答案

【问题标题】：Text on hover overflows doesn't align within <a>悬停溢出的文本在 <a> 内不对齐
【发布时间】：2019-07-27 00:05:27
【问题描述】：

我们有几个要用来显示一些文本的图块。在每个图块悬停时，我们希望显示一个隐藏的 <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 下所示的那样轻轻显示。

【问题讨论】：

考虑使用text-overflow: ellipsis;
@MarkSchultheiss 在什么元素上？
只需将overflow:hidden 添加到flex__text__wrapper
跟进，这将在 <div class="flex__text"> 上，因为其中包含您希望应用省略号的文本 - 不确定如何处理包装文本，但这可能是一个新问题

标签： html css responsive-design flexbox

【解决方案1】：

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

【讨论】：