当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