将标题限制为图像的宽度答案

【问题标题】：Limiting caption to width of the image将标题限制为图像的宽度
【发布时间】：2016-09-23 08:53:21
【问题描述】：

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

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

谢谢，马特

【问题讨论】：

迈克尔，感谢您的编辑！添加 css 确实使问题更加清晰。

标签： html css flexbox

【解决方案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>

Revised Codepen

【讨论】：

这很好用。谢谢！我确实添加了一些空间来分隔线条。上边距：10px；行高：16px;
我遇到了和 OP 一样的问题，这是我找到的最好的解决方案。谢谢！