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

问题描述

当文本到达图像的右侧时，如何将其包裹在 figcaption 中?

.flex-container {填充:0；边距:0；列表样式:无；显示:弹性；flex-flow:行包装；justify-content: flex-start;}.flex-figure-item {填充:5px；边距顶部:10px；行高:10px；字体粗细:粗体；字体大小:1em；}无花果{颜色:黑色;}

<figure class="flex-figure-item"><img src="https://placehold.it/150x200" alt="placeholder"><figcaption>Short，约翰</figcaption></图><figure class="flex-figure-item"><img src="https://placehold.it/150x200" alt="placeholder"><figcaption>WrapMe，Longname 不应越过图像的右侧</figcaption></图><figure class="flex-figure-item"><img src="https://placehold.it/150x200" alt="placeholder"><figcaption>Short, Sally</figcaption></图>

这是笔:http://codepen.io/mjankowski/pen/pbzejy

在上面的例子中，第二个图形标题远远超出了图像的右侧.我希望它在Longname"之后换行.

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

谢谢，马特

解决方案

一种方法是让 figure 元素成为弹性容器，并将它们的对齐方式设置为 flex-direction: column.这会让您更好地控制整个元素的宽度.

.flex-container {填充:0；边距:0；列表样式:无；显示:弹性；flex-flow:行包装；justify-content: flex-start;}.flex-figure-item {填充:5px；边距顶部:10px；行高:10px；字体粗细:粗体；字体大小:1em；显示:弹性；/* 新的 */弹性方向:列；/* 新的 */宽度:150px；/* 新的 */}无花果{颜色:黑色;}

<figure class="flex-figure-item"><img src="https://placehold.it/150x200" alt="placeholder"><figcaption>Short，约翰</figcaption></图><figure class="flex-figure-item"><img src="https://placehold.it/150x200" alt="placeholder"><figcaption>WrapMe，Longname 不应越过图像的右侧</figcaption></图><figure class="flex-figure-item"><img src="https://placehold.it/150x200" alt="placeholder"><figcaption>Short, Sally</figcaption></图>

修订后的 Codepen

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>

Here is the pen: http://codepen.io/mjankowski/pen/pbzejy

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.

Thanks, Matt

解决方案

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>

Revised Codepen

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