Переполнение и потеря данных в CSS

В этой статье мы рассмотрим различные сценарии, вызывающие переполнение контента. Изучим, какие способы решения данной проблемы предоставляет CSS.

Что такое переполнение?

Для примера рассмотрим простой HTML-код, состоящий из трех блоков с разным количеством контента. Но нам нужно выровнять эти блоки в ряд.

Аккуратный набор блоков

С плавающей (float) разметкой  добиться этого невозможно. В ней расположенные рядом блоки не взаимосвязаны.

Нижние границы блоков не выровнены

Ранее в этом случае дизайнеры ограничивали высоту блоков под предполагаемый объем  контента. Но если объем контента меняется или увеличивается размер шрифта, текст выходит за рамки блока. Это называется переполнением.

Переполнение, вызванное фиксированной высотой блоков

Отсутствие средств контроля блока относительно других блоков привело к появлению Flexbox и Grid. Но даже  эти технологии базируются на растягивании div до одинаковой высоты. Например, значением по умолчанию свойства align-items является stretch, при котором блоки растягиваются до высоты области сетки или flex-контейнера.

Кроме этого CSS Grid позволяет увеличивать размер блок по мере его заполнения. С помощью свойства minmax()можно установить минимальный и максимальный размер контейнера. Например, minmax(200px, auto) гарантирует, что элементы в строке всегда будут не меньше 200 пикселей, даже если элементы сетки пусты.

Но если содержимое ячейки Grid будет больше 200 пикселей, то при значении auto она сможет увеличиваться. В приведенном ниже примере первая строка имеет размер 200 пикселей, поскольку нет элементов, увеличивающих ее. Во втором ряду есть ячейка с большим объемом содержимого, чем в нее умещается. Поэтому используется значение auto.

Функция minmax() позволяет задавать нескольким элементам фиксированный размер. А также решает проблему переполнения.

Переполнение в строке

Угроза переполнения возникает, когда мы ограничиваем размер элементов. В приведенном выше примере описано ограничение по высоте. Но также возможно переполнение в строке, если ограничить ширину блока. Это то, что мы видим в меме «CSS is Awesome»:

Мем ‘CSS Is Awesome’

Слово «awesome» больше заданной ширины div, поэтому возникает переполнение. Решить эту проблему можно с помощью Flexbox.

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

Элементы плавающей разметки должны иметь заданную ширину

Flexbox позволяет браузеру самостоятельно определять, сколько места нужно каждому элементу. Это гарантирует, что блок со словом «awesome» будет растянут, и текст не выйдет за рамки контейнера. Flexbox отлично справляется с набором блоков неравного размера.

Flexbox распределяет место между элементами

Ключевое слово min-content может использоваться в качестве значения свойства width или inline-size. Установите width: min-content, и размер блока увеличиться настолько, чтобы вместить слово «awesome»:

Как избежать потери данных

В предыдущем примере переполнение возникает из-за того, что значением по умолчанию для свойства overflow является visible. При использовании overflow: auto или overflow: scroll вы получите полосы прокрутки. Это может пригодиться в некоторых ситуациях.

Также проблему переполнения можно решить, обрезав лишнее с помощью overflow: hidden. Но в этом случае мы потеряем отрезанную часть контента. И это может быть проблемой.

Например, если кнопка Submit формы находится в обрезанной области, пользователи не смогут отправить данные. Если будет обрезан последний абзац, мы никогда не узнаем, чем закончилась история!

Потеря данных и выравнивание

Рассмотрим Flex-элементы, которые расположены у края области просмотра и имеют разные размеры. Выровненные элементы прикреплены к правому краю. Но при выравнивании по центру более длинный элемент окажется за пределами области просмотра. Поэтому и выравнивание может привести к потере данных.

Это можно предотвратить, используя несколько новых ключевых слов. Они указаны в спецификации Box Alignment, которая касается выравнивания во всех методах разметки, включая Grid и Flexbox. В настоящее время они поддерживаются только в браузере Firefox.

В приведенном выше примере, если мы установим align-items: safe center, то конечный элемент будет выровнен по начальному значению, а не по центру. Это предотвратит потерю данных, вызванную смещением данных за пределы области просмотра.

Если нужно применить выравнивание (даже если оно приведет к переполнению), укажите unsafe center. В браузере Firefox можно протестировать оба примера: один с безопасным, а второй с небезопасным выравниванием.

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