当文本到达图像的右侧时,如何将文本包裹在 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”之后换行。
此外,欢迎提出更简单方法的建议。我只希望图片/标题整洁。
谢谢, 马特
最佳答案
一种方法是使您的 figure
元素成为 flex 容器,并将它们的对齐方式设置为 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>
关于html - 将标题限制为图像的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37442430/