图片点击切换class时底部文本随字符数消失的问题排查

我帮你排查了代码里的问题，核心是几个CSS属性的组合导致短文本被覆盖：

• 容器采用Flex布局，图片切换成绝对定位后脱离文档流，容器内部布局会重新计算
• .text 段落的 line-height: 0 直接导致段落高度塌陷，短文本的内容溢出了段落容器，刚好被展开的图片覆盖；而长文本因为自动换行撑开了段落高度，内容能避开图片的覆盖区域

修复步骤 #

1. 确保文本始终显示在图片上方

给文本段落添加相对定位和层级，避免被图片盖住：

p.text {
  font-family: cursive;
  font-size: 1.35rem;
  /* 替换原来的 line-height: 0 */
  line-height: 1.5;
  color: #c2c;
  display: block;
  /* 新增层级控制 */
  position: relative;
  z-index: 1;
}

2. 修复段落高度塌陷

把原来的 line-height: 0 改成合理的行高（比如1.5），让段落根据文本内容自动撑开高度，避免文本溢出容器。

3. 可选：优化图片展开的定位

给展开的图片明确设置定位和层级，确保它在文本下方：

img.photo.expandImage {
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  width: 97.8%;
  height: 97.8%;
  cursor: zoom-out;
  z-index: 0;
}

修改后的完整代码示例 #

<style>
p.text { 
  font-family: cursive; 
  font-size: 1.35rem; 
  line-height: 1.5; 
  color: #c2c; 
  display: block;
  position: relative;
  z-index: 1;
}
p a { font-size: 0.65rem; line-height: 2.6rem; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
img.photo { height: 49%; width: 49%; cursor: zoom-in; padding-bottom: 0.25rem; }
img.photo.expandImage { 
  position: absolute; 
  top: 0;
  left: 0;
  justify-content: center; 
  width: 97.8%; 
  height: 97.8%; 
  cursor: zoom-out;
  z-index: 0;
}
.container { 
  box-shadow: 0.075rem 0 0 0 #C9C9C9, 0 0.075rem 0 0 #C9C9C9, 0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset, 0 0.075rem 0 0 #C9C9C9 inset; 
  display: flex; 
  flex-wrap: wrap; 
  position: relative; 
  background-color: #ffffff; 
  max-width: 25rem; 
  max-height: 25rem; 
  min-width: 20rem; 
  min-height: 20rem; 
  padding: 0.32rem; 
  justify-content: space-between; 
  margin: 1rem 3% 4rem; 
}
.info { 
  position: absolute; 
  bottom: -3.25rem; 
  width: 1.5rem; 
  height: 3rem; 
  right: 0; 
  color: #FF0004; 
  text-indent: -9999px; 
  background-image: url(https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435); 
  background-repeat: no-repeat; 
  display: block; 
  background-size: contain; 
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title="">
<p class="text">Text<span style="color:#2E27A8"> – With 22 charact</span></p>
<a class="info" href="#">info</a>
</div>
<div class="container">
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="">
<p class="text">Text<span style="color:#2E27A8"> – With 21 charac</span></p>
<a class="info" href="#">info</a>
</div>
<script>
$('.photo').click(function() { $(this).toggleClass('expandImage') });
</script>

这样修改后，不管文本长短，点击图片展开时，文本都会稳定显示在图片上方，不会消失啦。

内容的提问来源于stack exchange，提问作者Aspid