将标题限制为图像的宽度

Question

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”之后换行。

另外，对于更简单的方法，也欢迎提出建议。我只希望图像/标题整洁。

谢谢，马特

Answer 1

一种方法是使您的figure元素具有弹性容器，并将其对齐方式设置为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>