将字幕限制为图像的宽度 [英] Limiting caption to width of the image

问题描述

如果在 figcaption 到达图片右侧时，如何将其换行？

How do I wrap the text in a figcaption when it reaches the right side of an image?

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

In the case above, the second figure caption moves well beyond the right hand side of the image. I would want it to wrap after "Longname".

此外，打开一个更简单的方法的建议。

Also, open to suggestions for a simpler approach. I just want the images/captions to be neat and tidy.

感谢，
Matt

Thanks, Matt

推荐答案

一个方法是使你的图元素flex容器，并将它们的对齐方式设置为 flex-direction：列。这将让你更多地控制整个元素的宽度。

One method would be to make your figure elements flex containers, and set their alignment to flex-direction: column. This would give you more control over the width of the entire element.

.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

这篇关于将字幕限制为图像的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！