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

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;
}

参见 fiddle 演示:http://jsfiddle.net/audetwebdesign/H3Ngz/

评论

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

但是，需要用图像包裹 figcaption 以限制宽度。如果您通过设置 width: inherit 使用绝对定位，就可以做到这一点。

这就引出了另外一个问题，figcaption的高度怎么办？

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

但是，由于绝对定位，标题文本不在内容流中，因此当视口(viewport)更改宽度时文本回流时，有办法允许其高度。

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

问题是你不知道字幕文本的长度...

一点点 jQuery 就能修复这些限制的日志。