Делюсь лайфхаком
Если у вас в десктопной версии сайта в тексте есть переносы строк (через тег
), то они могут печально выглядеть на мобильном. Когда экран сжимается, перенос строки часто становится неуместен (особенно в заголовке). И чтобы не делать копии блоков для разных разрешений экрана из-за одного лишь переноса, есть такой способ исправить это:
@media (max-width:768px) {
.my-text br {content:"";}
.my-text br:before {content:" ";}
}
В медиа-запросе "768px" это ширина экрана, ДО которой это правило будет работать. У меня 768px, т.к. обычно с этого разрешения начинается моб версия сайта, у вас это может быть другой значение.
В этом CSS-правиле мы просто убираем контент у элемента
(т.е. сам перенос), и вместо него, с помощью псевдоэлемента "before", вставляем пробел.
* my-text меняете на класс вашего текста.
