Как сохранить телефонный номер целиком при переносе строки

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

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

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

Сначала проверьте саму запись и её смысл. Номер может быть международным или местным, включать добавочный номер, пояснение, код города, скобки и разные разделители. Не нормализуйте его по одному шаблону без источника: формат записи для контакта задаёт владелец данных или редакционная система. Рекомендация ITU-T E.123 описывает нотацию национальных и международных телефонных номеров; это полезный ориентир для записи, но сам по себе он не выбирает переносы для каждого узкого макета.

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

Например, запись вида «+7 (900) 123 45 67» состоит из международного префикса, кода и групп основной части. Это пример структуры, а не обязательный формат для всех регионов. Перед применением переноса сверьте запись с исходными данными и способом связи, который показывает сайт или организация. Не меняйте порядок цифр, не удаляйте знак «+» и не добавляйте скобки только ради красивой строки.

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

Подходит, если номер короткий относительно доступной ширины и рядом нет длинной подписи. В настольной верстке можно объединить компоненты неразрывными пробелами; в HTML неразрывный пробел пишется как   или задаётся символом U+00A0. Он выглядит как пробел, но не позволяет сделать перенос на этой границе. Это помогает сохранить пары вроде кода и следующей группы.

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

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

Пример для проверки можно записать как «+7 (900) / 123 / 45 / 67», где косые черты обозначают только возможные точки переноса, а не знаки, которые нужно печатать. Сравните варианты: целиком на одной строке; с переносом после кода; с переносом между группами основной части. Выберите тот, где номер остаётся узнаваемым, а ширина строки не создаёт неловкой пустоты.

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

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

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

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

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

Если номер набран авторским рукописным шрифтом, оценивайте не только группировку. Проверьте различимость похожих цифр, форму «1», «4» и «7», высоту знаков и расстояние вокруг скобок или дефиса. Маленький пробный набор номера полезен рядом с реальным текстом: так видно, не превращается ли разделитель в цифру и не сливаются ли соседние знаки. Сам номер можно включить в пробу как есть, не подменяя его декоративными буквами.

Заменить все пробелы на неразрывные. Так номер не распадается, но слишком длинная запись может вылезти из колонки или создать пустой край. Склеивайте минимальную группу, которая должна оставаться вместе.

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

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

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

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

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

В Unicode U+00A0 NO-BREAK SPACE запрещает перенос на границе; в HTML часто используют  . U+202F NARROW NO-BREAK SPACE ведёт себя как неразрывный, но имеет более узкую ширину. Проверьте визуальный результат в выбранном шрифте и среде.

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

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

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

Да, если место переноса выбрано осознанно и макет имеет фиксированный формат. После правок текста, изменения шрифта или ширины полосы повторно проверьте перенос: он мог устареть.

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

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

Источники: Unicode Standard Annex #14: Unicode Line Breaking Algorithm; ITU-T Recommendation E.123; W3C CSS Text Module, свойство white-space.