Как настроить обрезку заголовков в мобильной навигации

Обрезка заголовков в мобильной навигации нужна, чтобы длинные пункты меню не ломали сетку, не создавали горизонтальную прокрутку и не скрывали соседние элементы. Обычно используют однострочный текст с многоточием или ограничение в две строки. Ниже разберём CSS-настройки, доступность, тестирование и типичные ошибки.

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

Обрезка текста не должна скрывать смысл ради компактности. Это инструмент управления интерфейсом, а не способ замаскировать неудачную структуру контента. Перед настройкой CSS проверьте, можно ли сократить сам пункт меню: например, заменить «Инструменты для создания и редактирования шрифтов» на «Инструменты для шрифтов». Чем короче исходная формулировка, тем меньше компромиссов для мобильного UX.

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

Для однострочной обрезки элементу нужны три условия: запрет переноса, скрытие выходящего за границы текста и отображение многоточия. В CSS это обычно реализуют сочетанием свойств white-space: nowrap, overflow: hidden и text-overflow: ellipsis. Одновременно необходимо задать ширину или максимальную ширину пункта, иначе браузеру нечего будет обрезать.

Обрезайте не весь интерактивный контейнер, а текстовый элемент внутри него. Кнопка или ссылка должна сохранять область нажатия, внутренние отступы и состояние фокуса. Если применить overflow: hidden к контейнеру с иконкой, стрелкой или индикатором, важные элементы могут исчезнуть вместе с текстом.

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

Две строки полезнее, если обрезка в одну строку удаляет ключевое слово. Пункт «Создание кириллических шрифтов» при жёстком ограничении может превратиться в «Создание кирил…», и пользователь потеряет важную часть смысла. Ограничение в две строки сохраняет больше контекста, но требует одинаковых межстрочных интервалов и понятной высоты элемента.

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

Сначала измерьте не ширину всего экрана, а пространство, которое остаётся конкретному пункту. Из него нужно вычесть внутренние отступы, иконку, стрелку раскрытия и расстояние между элементами. Если ссылка занимает всю строку, создайте внутри неё отдельный текстовый контейнер. Это позволит обрезать заголовок, не затрагивая интерактивные части меню.

Составьте список самых длинных пунктов и проверьте их без стилей. Уберите повторяющиеся слова, канцелярские обороты и лишние уточнения. Например, «Перейти к разделу с готовыми шаблонами» можно заменить на «Готовые шаблоны». Такая редактура улучшает и мобильную, и десктопную навигацию, а также уменьшает вероятность того, что важный термин окажется за многоточием.

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

Для многострочной обрезки используйте ограничение количества строк через line-clamp или совместимый набор CSS-свойств. Заранее задайте line-height и высоту элемента, чтобы пункты не отличались друг от друга. Важно проверить поведение в разных браузерах: если ограничение строк не сработало, резервный вариант должен либо показывать полный текст, либо использовать однострочную обрезку.

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

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

В верхней панели обычно мало места: рядом могут находиться логотип, кнопка меню и поиск. Для пунктов вроде «Каталог шрифтов», «Генератор текста» и «Поддержка» можно использовать одну строку. Если название не помещается, сокращайте его до понятного термина, например «Каталог» или «Шрифты», а не полагайтесь только на скрытие конца фразы.

В выезжающей панели ширины обычно больше, поэтому допустимы две строки. Для пункта «Инструменты для создания шрифтов» можно оставить полный текст и ограничить его двумя строками. Установите одинаковые вертикальные отступы, а стрелку вложенного меню закрепите у правого края, чтобы она не уезжала вслед за длиной заголовка.

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

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

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

Для одной строки обычно применяют white-space: nowrap, overflow: hidden и text-overflow: ellipsis, а также задают ширину текстового блока. Для нескольких строк используют line-clamp с заданным количеством строк. В обоих случаях важно ограничить область элемента, иначе браузер не сможет определить, где заканчивается доступное пространство.

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

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

Чаще всего у элемента нет ограничения по ширине, разрешён перенос строки или переполнение скрыто не на том уровне. Проверьте, что текстовый блок действительно сжимается внутри flex-контейнера, имеет min-width: 0 при необходимости и не растягивается содержимым. Также убедитесь, что свойство применяется к элементу с текстом, а не только к внешней ссылке.

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

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

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

Типографика влияет не только на внешний вид меню, но и на ощущение качества всего интерфейса. Если вы создаёте собственную визуальную систему, попробуйте разработать шрифт для сайта или проекта на fontgenerator.ru.