javascript - 文本根据字符数消失

Question

单击时我有一组图像切换类。底部有一行文本。

此文本根据字符数消失。我找不到原因。

在片段中，点击图片时:

• 蓝框超过22个字符，文字没问题。
• 绿色框少于 22 个字符，文本消失。

$('.photo').click(function() {
  $(this).toggleClass('expandImage')
});

p.text {
  font-family: cursive;
  font-size: 1.35rem;
  line-height: 0;
  color: #c2c;
  display: block
}

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;
  /*cursor:url(file:///Macintosh HD/Desk/PENDIENTES/FOTOS/GENERAL/zoom.cur), -moz-zoom-in;*/
  padding-bottom: 0.25rem;
}

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

.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: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  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;
}

<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>

Answer 1

您可以将 width: 100%; 和 flex-shrink: 0; 添加到 p.text 以防止此元素向上移动进入绝对定位的大图像后面的空白空间并隐藏在图像后面(即被它覆盖):

(将 position: absolute 应用于其中一张图像也会在右下角创建空白，因为如果您不强制文本具有全宽，文本就会移动到该空白中。)

$('.photo').click(function() {
  $(this).toggleClass('expandImage')
});

p.text {
  font-family: cursive;
  font-size: 1.35rem;
  color: #c2c;
  line-height: 0;
  display: block;
  width: 100%;
  flex-shrink: 0;
}

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;
  /*cursor:url(file:///Macintosh HD/Desk/PENDIENTES/FOTOS/GENERAL/zoom.cur), -moz-zoom-in;*/
  padding-bottom: 0.25rem;
}

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

.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: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  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;
}

<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>