x
 
Александр Ратманский
3 мая 2012

Размеры картинки заранее неизвестны. Подпись располагается под картинкой. Возможно ли с помощью ЦСС сделать так, чтобы длинная подпись не вылезала за край картинки, а переносилась на следующую строку?

Примерная разметка:

<div>
 <img src="pic.jpg">
 <span>текст подписи</span>
</div>


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

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

<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>

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Егор Стремоусов
3 мая 2012

Для верстки подобных картинок с подписями лучше использовать более семантичные теги FIGURE и FIGCAPTION вместо «бессмысленных» DIV и SPAN.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

5 Хочется, чтобы много красивых картинок на сайте быстро загружались 14 1




Недавно всплыло

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 2 1