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>
See Question&Answers more detail:os