限制标题宽度与图片相同。

Question

限制标题宽度与图片相同。

3

当figcaption的文字到达图像的右侧时，我该如何将其换行？

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-figure-item {
  padding: 5px;
  margin-top: 10px;
  line-height: 10px;
  font-weight: bold;
  font-size: 1em;
}
figcaption {
  color: black;
}

<div class="flex-container">
  <figure class="flex-figure-item">
    <img src="https://placehold.it/150x200" alt="placeholder">
    <figcaption>Short, John</figcaption>
  </figure>
  <figure class="flex-figure-item">
    <img src="https://placehold.it/150x200" alt="placeholder">
    <figcaption>WrapMe, Longname should not go past right side of image</figcaption>
  </figure>
  <figure class="flex-figure-item">
    <img src="https://placehold.it/150x200" alt="placeholder">
    <figcaption>Short, Sally</figcaption>
  </figure>
</div>

这里是笔的链接：http://codepen.io/mjankowski/pen/pbzejy

以上情况中，第二幅图的标题超出了图像的右侧。我希望它在“Longname”后自动换行。

另外，如果有更简单的方法也欢迎提供建议。我只想让图片和标题整齐漂亮。

谢谢， Matt

- Matthew David Jankowski

1

Michael，谢谢你的修改！添加CSS确实让问题更加清晰明了。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

一种方法是将您的figure元素设置为flex容器，并将它们的对齐方式设置为flex-direction: column。这样可以更好地控制整个元素的宽度。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-figure-item {
  padding: 5px;
  margin-top: 10px;
  line-height: 10px;
  font-weight: bold;
  font-size: 1em;
      
  display: flex;           /* NEW */
  flex-direction: column;  /* NEW */
  width: 150px;            /* NEW */
}
figcaption {
  color: black;
}

<div class="flex-container">
  <figure class="flex-figure-item">
    <img src="https://placehold.it/150x200" alt="placeholder">
    <figcaption>Short, John</figcaption>
  </figure>
  <figure class="flex-figure-item">
    <img src="https://placehold.it/150x200" alt="placeholder">
    <figcaption>WrapMe, Longname should not go past right side of image</figcaption>
  </figure>
  <figure class="flex-figure-item">
    <img src="https://placehold.it/150x200" alt="placeholder">
    <figcaption>Short, Sally</figcaption>
  </figure>
</div>

修改后的Codepen