По стандартам бюро в коде страниц всегда должны быть явно указаны размеры картинок, чтобы избежать эффекта Упячки.

Если ваш движок это умеет, просто укажите заодно ширину картинки и контейнеру:

<div style="width: 394px;">
 <img src="pic.jpg" width="394" height="294">
 <span>текст подписи</span>
</div>

Если вы никак не влияете на серверную часть, сверстайте такой блок, воспользовавшись свойством display: table-cell. Невлезающий по ширине элемент будет распирать контейнер. А чтобы ни одна картинка не влезала, задайте блоку ширину в один пиксель:

<style>
  .ap-pic {
    display: table-cell;
    width: 1px;
    padding: 3px;
    background: #b9b9b9;
  }
 
  .ap-pic .caption {
    display: block;
    padding: 14px 15px 9px;
    font-family: 'Myriad Pro', 'Trebuchet MS', sans-serif;
    font-size: 20px;
    line-height: 24px;
  }
</style>

<div class="ap-pic">
  <img src="pic.jpg">
  <span class="caption">Длинный текст подписи,
    который должен переноситься на следующую
    строку</span>
</div>

Длинный текст подписи, который должен переноситься на следующую строку

Длинный текст подписи, который должен переноситься на следующую строку

В ИЕ 6 и 7 этот способ работает только с настоящей таблицей:

<style>
  TABLE.ap-pic {
    border-collapse: collapse;
  }
 
  TABLE.ap-pic TD {
    padding: 3px;
    background: #b9b9b9;
    width: 1px;
  }
</style>

<table class="ap-pic">
  <tr>
    <td>
      <img src="pic.jpg">
      <span class="caption">Длинный текст подписи,
        который должен переноситься
        на следующую строку</span>
    </td>
  </tr>
</table>