☝ На Joomla 4 у меня случился один небольшой, но неприятный для кармы случай – ссылки (которые идут в виде URL) вытягивались в одной строку и негодно расширяли экран на мобильном устройстве. В результате появлялся скроллинг вправо, где кроме пустоты были только хвосты ссылок.
Решение проблемы прокрутки
Чтобы решить проблему в шаблоне Cassiopeia понадобилось 2 минуты, почему этот код было не прописать разработчикам Joomla 4 сразу – это вопрос, не имеющий ответа.
👀 Чтобы заставить веб-ссылку не выходить за рамки экрана, а переноситься на нижнюю строку (обрываясь буквально по цифре-букве, но сохраняя кликабельность), надо дописать в блоке «a {…» CSS (на шаблоне Кассиопея это templates.css) код:
word-break: break-all;
В готовом виде весь блок должен выглядеть так:
a {
color: var(--cassiopeia-color-link);
word-break: break-all;
}
Чем отличается break-all
💕 Отличие break-all от собратьев break-word и overflow-wrap, break-all в том, что свойство переносит строку там, где идет превышение границы экрана. Разрыв и перенос происходят даже там, где строку можно перенести по словам, но так как эта команда имеет отношение только к «a {…», то текст body перекашиваться резкими разрывами не будет.
Проще говорz, word-break: break-all; работает так –
Как только цифры-буквы в ссылке доходят до границы экрана, то стазу обрываются и переносятся на строку ниже.
Это решает проблему таинственного скроллинга (прокрутки) вправо и позволяет сайту корректно отображаться на мобильных устройствах.