Как не позволять тексту растягивать родительский блок с нефиксированной шириной?

Задача, казалось бы, тривиальная.

Вот есть код:

<div class="parent">
    <div class="image">
        <img src="1.jpg">
    </div>
    <div class="caption">
        Это пояснение к картинке, может быть любой длиной.
    </div>
</div>

Картинка может быть любой шириной. Но текст-пояснение, расположенный ниже, должен не выходить за рамки картинки, а переноситься! Как это сделать?

Структуру тегов можно менять как угодно. Главное, реализовать описанный выше принцип: подпись к картинке с ограниченной максимальной шириной по ширине картинки. Без JS, естессно.

С ума сошел уже придумывать решение.