Минимальная ширина абзаца в резиновом макете

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

 

Пример, когда плавающее изображение
оставляет несколько слов.

Плавающая картинка отнимает горизонтальное пространство у текста, который обтекает вокруг неё. В макетах фиксированной ширины вы можете проверить, что место, которое вы оставили для текста, достаточно для создания хорошо выглядящей колонки, будучи уверенным, что все остальное увидят то же самое.

В резиновых макетах, однако, у вас нет такой гарантии. Если пользователь просматривает ваш сайт на маленьком устройстве, горизонтальное пространство, которое вы выделили для текста, может вмещать только одно-два слова на строку. Такая узкая колонка текста не просто выглядит уродливо, она еще и непрочная. Предложение, которое содержит длинное слово разорвётся, когда длинное слово перейдёт вниз под плавающую картинку. Оно оставит за ним пустое место.

Неуловимая ширина минимального параграфа

Чтобы решить проблему слишком узкого параграфа, нам нужен способ установить минимальную ширину абзаца. Если область оставленная плавающей картинкой меньше этой ширины, тогда весь абзац перемещается под картинку.

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

 

Красная граница — это граница абзаца.

Интуитивно кажется, что следующий CSS отвечает всем требованиям:

p {
  min-width: 10em;
  /* For demonstration */
  border: 1px solid red;
}

Однако, это не даст эффекта. Картинка плавает над абзацем и соответственно не уменьшает установленную ширину параграфа. А между тем, текст внутри абзаца покорно отодвигается в сторону, чтобы освободить место для плавающей картинки и поэтому проблемы остаются.

Медиа запросы, решение для известной ширины картинок.

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

 

Медиа запросы работают, но требуют
фиксированной ширины изображений.

Если ваша картинка (или другой плавающий контент) используют фиксированную и преопределённую ширину, тогда вы можете использовать CSS3 Media Queries, чтобы отменить обтекание на размерах экранов, которые слишком узки, чтобы уместить рядом и картинку, и колонку с текстом.

Это решение конечно же будет работать только в браузерах с поддрежкой CSS медиа запросов. Для остальных браузеров решение деградирует до изначальной проблемы.

@media screen and (max-width: 400px) {
  img {
    float: none;
  }
}

Основное решение использующее псевдо-элемент

Медиа запросы не решают задачу, когда плавающие элементы могут быть произвольной ширины, оно также не очень элегантное.

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

 

Этот пример показывает свойства
псевдо элемента в месте, показав
тонкую зелёную границу окружающего
псевдо элемента. Элемента и абзац
находятся под изображением.

Лучшее решение — установить для каждого параграфа скрытый псевдо-элемент с желаемой минимальной шириной. Если там не достаточно места, чтобы вместить псевдо элемент, тогда он опустится под картинку, перенося с собой параграф.

Это решение работает в большинстве браузеров. В старых браузерах решение деградирует до изначальной проблемы.

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  /* For Demonstration */
  border: 1px solid green;
}

Зелёная граница псевдо-элемента нужна для демонстрации работы. Это не требуется для решения и вы можете удалить этот участок у себя в коде. Тогда псевдо-элемент вообще не будет занимать вертикальное пространство.

Демо

Ссылка на оригинал

P.S. Это тоже может быть интересно:

2 Комментарии

  1. LostSenSS

    Очень пригодилось, спасибо! 
    До этого делал подобное js'ом. 
    Кстати, это полезно не только в резиновой верстке, но и в фиксированной, если картинки могут быть разной ширины. 

  2. Bob

    Если убрать у параграфа красную рамку, то перестает работать.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.