Контент и переполнение

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

Сравните один текст сверху и снизу: в этом примере высота Hug сохраняет последние строки и сдвигает следующую карточку. Фиксированная высота, прокрутка и сокращение не запрещены вообще: для них нужна явная, подходящая политика переполнения. Открыть в полном размере.

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

Предпочитайте высоту по контенту

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

Когда фиксированная высота оправдана

Используйте её, если продукту нужны заданная видимая область, обрезка, медиаблок или область прокрутки. Затем решите, что происходит, когда контент не помещается. Растущий блок уже не имеет фиксированной высоты; если граница должна оставаться неизменной, опишите поведение содержимого внутри:

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

Не используйте ручные переносы и отдельный мобильный текст только ради композиции.

Проверьте границы

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

Когда готово

Команда должна знать, как блок ведёт себя с обычными, длинными, пустыми и ошибочными данными.