Forcing the figcaption element to wrap to the width of image

I professed my high regard for the HTML5 Figure element back in December, but having used it for for a few months something has been bugging me with it: by default, text in the Figcaption element does not wrap to the width of the image element.

That it should seems self-evident. Why would you want the text to sprawl beyond the width of the image for which it is the caption? Someone at the W3C needs to use the Figure element more often to discover this for themself!

I have been working around this with inline styling, but thankfully, there is a way to fix this with just a CSS tweak.

Here's the tweak. Set the display property of the figure to table and to specify a width less (or equal) to the image.

  figure {
    display: table;
    width: 48px;}

Setting the <figure> element to display as a table will result in the content flowing to the width, which above is set to a totally arbitrary number of 48 pixels. However, if an image contained in the figure element is greater than the set width the table display will expand to accommodate it, with the figcaption element expanding to the same width.

Mission accomplished!

Recent/related stories:

Tags: HTML5.