Wrap text for container of undefined width

Question

In my fiddle here, I would like to split the text into 2 lines. The splitting needs to be like in the image below:

The splitting needs to be according to the width of the image.

I tried playing with word-break but it seems that it needs width of the container to be defined.

Is there a way to fix this using CSS only?

jsFiddle

Answer 1

You can use the display: table-caption property to make an item fit the width its container already had without stretching it, and reset the white-space to make sure the lines actually break when it gets too wide:

span.item a{
    text-decoration: none;
    color: grey;
    text-align: center;
    display: table-caption;
    white-space: normal;
}

Then add a vertical-align: top to your span.item to make them line up nicely.

Fiddle: http://jsfiddle.net/n4c24cg7/4/

Answer inspired by this answer.