Перенос строки с break-all

☝ На 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; работает так –

Как только цифры-буквы в ссылке доходят до границы экрана, то стазу обрываются и переносятся на строку ниже.

Это решает проблему таинственного скроллинга (прокрутки) вправо и позволяет сайту корректно отображаться на мобильных устройствах.



Яндекс.Метрика