Длинный URL без горизонтального переполнения
Длинный адрес может растянуть карточку, если в строке недостаточно естественных точек переноса.
Назначение
Длинный адрес может растянуть карточку, если в строке недостаточно естественных точек переноса.
Как это работает
overflow-wrap:anywhere разрешает дополнительные переносы и влияет на минимальный размер содержимого. Для flex- или grid-потомка также может понадобиться min-width:0.
Пример
<style>.card{max-width:18rem;padding:16px;border:1px solid}.card a{overflow-wrap:anywhere}</style>
<div class="card"><a href="https://example.com/verylongdemonstrationpathwithoutspaces">https://example.com/verylongdemonstrationpathwithoutspaces</a></div>Что должно получиться
Адрес переносится внутри ограниченной карточки. Использован демонстрационный домен; переход к реальному материалу этим примером не обещается.
Граница применения и частая ошибка
Не обрезайте единственный текст ссылки так, что цель становится непонятна, и не прячьте переполнение всего body. Исправляйте конкретный текстовый блок и проверяйте доступность полного адреса.
Самостоятельная проверка
Поставьте адрес без дефисов и пробелов длиной больше ширины карточки. Сравните normal и anywhere, затем скопируйте ссылку: визуальный перенос не должен менять её href.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.