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

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

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

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

Переполнение и потеря данных в CSS
Аккуратный набор блоков

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

Переполнение и потеря данных в CSS
Нижние границы блоков не выровнены

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

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

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

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

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

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

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

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

Переполнение и потеря данных в CSS
Мем ‘CSS Is Awesome’

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

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

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

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

Переполнение и потеря данных в CSS
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 предлагает несколько методов управления переполнением. Так что и мы можем создавать шаблоны, которые будут работать с разным объемом контента.

Добавить комментарий

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