CSS - 让文本使用兄弟块元素的最大宽度

Question

我目前正在解决这个问题，我正在尝试为图像元素添加标题。如果标题的宽度大于图像，则标题应该换行。

<figure class="caption">
    <a href="#" target="_blank">
        <img src="/sample_image" alt="">
    </a>
    <figcaption>This is a sample-caption that should wrap if it's width exceeds the width of the image</figcaption>
</figure>

正常情况下，像这样的一些CSS代码应该可以完成这项任务：

figure {
    display: table;
    width: 50px;
}
figcaption {
    display: table-row;
}

问题是，这不能与以下CSS结合使用，用于自动缩放移动设备的图像：

img {
    max-width: 100%;
}

所以这里提到的解决方案https://stackoverflow.com/a/617455/583569不起作用。 我知道，这不是一个好的解决方案，但是现在将所有图像转换成各种格式需要很长时间。

是否有可能的非JS解决方案来解决这个问题？

Answer 1

我认为这可能对你有用，但这个解决方案有局限性。

如果这是 HTML ：

<figure class="caption">
    <a href="#" target="_blank">
        <img src="http://placehold.it/300x200" alt="">
    </a>
    <figcaption>This is a sample-caption that should wrap 
                if it's width exceeds the width of the image</figcaption>
</figure>

并应用 CSS ：

figure {
    display: inline-block;
    position: relative;
    border: 1px dotted gray;
}
figure a {
    display: inline-block;
}
figure img {
    vertical-align: top;
    width: 100%;
    margin-bottom: 70px;
}

figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: inherit;
    height: 70px;
}

请参阅：http://jsfiddle.net/audetwebdesign/H3Ngz/

上的小提琴演示

评论

主要问题是我们需要允许figure的宽度缩小以适应图像，使用缩小到适合他们的inline-block元素并不难做到这一点内容。

但是，需要将figcaption包裹在图像中以限制宽度。 如果您通过设置width: inherit来使用绝对定位，则可以执行此操作。

这会导致另一个问题，你如何处理figcaption的高度？

如果标题下方没有任何内容，您只需让它向下扩展即可 不与任何其他内容重叠。

但是，由于绝对定位，标题文本不在内容流中，所以当视图端口改变宽度时，有文本重排的高度允许其高度。

有限但可能的解决方法是指定figcaption的高度或允许标题中的滚动条。

问题是您不知道标题文本的长度......

一些jQuery会修复这些限制的日志。

Answer 2

尝试一下：

figure {
    display: inline-flex;
    position: absolute;   
}

figure img {
    width: 100%;
    margin-bottom: 70px;
}
figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}