Search:
Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords

Forcing the figcaption element to wrap to the width of image

26th Feb 2012

Page: prev. | 1 | next

Figcaption does not wrap
No, this really just does not look right. It needs fixing.

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.

Figcaption will now wrap
And there we are. Doesn't that look much, much better!

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:

HTML5Shiv for HTML5 support for IE < 9
The HTML5 Figure element

Page: prev. | 1 | next

Tags: HTML5.

Disclaimer:

Illustrations, paintings, and cartoons featuring caricatured celebrities are intended purely as parody and fantasised depictions often relating to a particular news story, and often parodying said story and the media and pop cultural representation of said celebrity as much as anything else. Who am I really satirising? Read more.

Privacy policy

No cookies, ad and tracker free. Read more.