Как переносить длинные ссылки в веб-статье, не ломая строку и адрес

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

В тексте статьи ссылка обычно может иметь понятное название: «руководство по свойству overflow-wrap» вместо полного адреса из десятков символов. Описательный анкор легче просканировать глазами, объясняет назначение перехода и остаётся компактным. Если URL не важен сам по себе, не превращайте технический адрес в часть предложения только ради его демонстрации.

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

Показываемый текст и назначение ссылки — разные вещи. У элемента `<a>` значение `href` должно содержать исходный URL без форматирующих разрывов. Видимую строку можно разбить CSS или подсказками HTML. После оформления убедитесь, что переход и копирование дают ожидаемый адрес.

Браузер переносит обычный текст в допустимых местах: между словами, после пробела и по правилам языка. У URL часто нет пробелов, а некоторые сегменты пути, идентификаторы или значения параметров очень длинные. В стандартном режиме браузер сохраняет непрерывную строку и может нарисовать её за краем узкого контейнера вместо того, чтобы молча убрать часть адреса.

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

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

.article-content {
  overflow-wrap: break-word;
}

Значение `break-word` помогает предотвратить переполнение, но старается сохранить обычные точки переноса. Если длинное слово само помещается на следующую строку, браузер не обязан резать его на середине. Визуально это мягче, чем глобально разрывать любое слово по символу.

На практике начните с `.article-content`: такой стиль покрывает URL в ссылках и случайно вставленные длинные строки, но не меняет расположение слов в кнопках, метках и других интерфейсных элементах вне области статьи. Если у проекта есть общая типографическая оболочка для материалов, используйте её реальный селектор.

Для современных проектов можно рассмотреть `overflow-wrap: anywhere`. Оно тоже создаёт дополнительные точки переноса в непрерывной строке. В отличие от `break-word`, такие точки учитываются при расчёте минимального размера содержимого. Это может иметь значение внутри grid- и flex-контейнеров, когда длинная ссылка влияет на минимальную ширину колонки. Выбирайте значение по поведению макета и проверяйте его в реальном контейнере, а не по одному примеру в песочнице.

.article-content {
  overflow-wrap: anywhere;
}

Оба решения следует тестировать на самых длинных ссылках редакционного архива. Если адрес выглядит читабельно и не растягивает страницу, не добавляйте более агрессивные правила «на всякий случай».

`word-break: break-all` разрешает разрыв непосредственно в месте переполнения, даже если обычное слово целиком можно перенести на следующую строку. Если применить его ко всей статье, браузер может поставить разрыв внутри короткого слова у края строки. Это помогает не допустить горизонтального переполнения, но создаёт рваное чтение и визуально превращает каждую строку в набор случайных фрагментов.

/* Не задавайте это всему тексту статьи без особой причины. */
.article-content {
  word-break: break-all;
}

Для отдельных URL такое правило тоже часто избыточно: сначала попробуйте `overflow-wrap`. Значение `word-break: break-word` встречается в старых примерах, но современные рекомендации MDN описывают его как устаревшее; предпочтительнее явно выбрать `overflow-wrap` и нормальное поведение `word-break`.

Не смешивайте переносы с обрезкой. `overflow: hidden`, многоточие и фиксированная высота не дают читателю увидеть конец адреса; прокрутка контейнера по горизонтали переносит проблему на пользователя. Для редакционного текста цель — оставить всю информацию видимой и позволить ей естественно перетекать на следующую строку.

Если адрес разбит на понятные части, можно вручную предложить браузеру точки переноса через `<wbr>`. Например, для демонстрационного адреса допустимо разметить точку, слеш или границу сегмента. Элемент обозначает возможность разрыва строки: браузер перенесёт строку там, если ширины не хватит. Символ дефиса при этом не добавляется.

<a href="https://example.org/guide/long-section/reference">
  https://example.org/<wbr>guide/<wbr>long-section/<wbr>reference
</a>

`href` здесь остаётся цельным. `<wbr>` находится только в видимом тексте. Не вставляйте `<wbr>` автоматически после каждого символа: равномерное дробление лишает URL визуальной структуры и делает копирование отображаемого текста менее предсказуемым в разных сценариях.

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

В HTML также существует мягкий дефис `&shy;`, который может показываться на конце перенесённой строки. Внутри реального URL он способен исказить адрес при копировании или интерпретации, поэтому для адресов выбирайте точки без видимого знака разрыва. Если нужна строго читаемая запись URL как примера кода, иногда лучше разместить её в отдельном блоке с отдельным способом просмотра, но не скрывать символы.

Ссылка в обычном абзаце и URL в кодовом примере — разные сценарии. В тексте полезно сохранить естественный перенос, а в коде может быть важно показать точную строку без изменений. Если у блока стоит `white-space: pre`, переносов по обычным правилам не будет. Длинный адрес тогда способен расширить блок.

Для примера кода задайте решение локально. Можно разрешить перенос и сохранить доступ к полному тексту, либо оставить горизонтальную прокрутку только внутри узкого блока, если построчное сравнение важно. Не назначайте `overflow-wrap` всему `pre code`, не проверив команды и строки, где границы имеют значение.

.article-code {
  max-inline-size: 100%;
  overflow-x: auto;
}

.article-code--url {
  white-space: normal;
  overflow-wrap: anywhere;
}

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

Не всякое «разрывание» длинной строки лечится настройкой переноса. В grid- или flex-макете элемент может сохранять минимальную ширину содержимого и выдавливать соседнюю колонку. Помимо `overflow-wrap: anywhere`, проверьте минимальный размер самой колонки и дочернего элемента. Иногда нужен `min-width: 0` для flex-элемента или `minmax(0, 1fr)` для grid-трека; применяйте их к контейнеру, который действительно ограничивает текст.

.article-grid {
  grid-template-columns: minmax(0, 1fr) 16rem;
}

.article-content {
  min-width: 0;
  overflow-wrap: break-word;
}

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

Да, если непрерывный адрес не помещается в доступную ширину. Для этого задают `overflow-wrap: break-word` или `anywhere` на подходящем контейнере. Визуальный перенос не должен изменять `href`; проверьте переход и копирование отдельно.

Для статьи начните с `overflow-wrap`: он сохраняет обычные точки переноса и вмешивается в слишком длинную непрерывную строку. `word-break: break-all` агрессивнее и может разрезать обычные слова у края строки, поэтому редко подходит всему текстовому контейнеру.

Сам `<wbr>` указывает браузеру допустимое место для переноса отображаемого текста и не добавляет видимого символа или дефиса. Размещайте его в текстовом содержимом ссылки, а не внутри `href`. После публикации всё равно протестируйте копирование адреса из страницы.

Обычно нет: дефис может быть принят за часть адреса при ручном копировании. `<wbr>` позволяет браузеру перенести строку без добавления дефиса. В тексте самой статьи мягкий дефис полезен для некоторых слов, но URL требует отдельной проверки.

У дочернего элемента может быть минимальная ширина, рассчитанная по самому длинному непрерывному фрагменту. Проверьте `min-width: 0` у flex-элемента или размеры grid-трека, а затем добавьте подходящий `overflow-wrap`. Сначала найдите контейнер, который удерживает ширину.

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

Откройте её и сравните целевой адрес, включая путь, параметры запроса и фрагмент. Затем выделите и скопируйте URL с опубликованной страницы и вставьте его в редактор. Проверка только внешнего вида не обнаруживает неверный `href`.

Длинную ссылку не нужно прятать или насильно разбивать дефисами. Сначала решите, нужен ли читателю полный адрес, затем задайте точке текста подходящий `overflow-wrap`, а для предсказуемых ручных разрывов используйте `<wbr>` только в видимом тексте. Проверьте узкую ширину, макет родительского контейнера, переход и копирование. Для других задач веб-типографики можно создать свой шрифт в Fontgenerator.