Заметили, что на определенном разрешении экрана (менее 768px) у нас по вертикали растягиваются "плашки", которые появляются, если выбрать чекбокс (услугу или станцию метро). Мы проверили верстку этого элемента. Только на этом разрешении экрана у элементы до и после текста появляется несколько тегов <br>, которых точно нет в нашей верстке. Сайт на вордпрессе.
<br>
Первое, что нужно проверить, это выключен ли специальный фильтр вордпресса для контента, который называется wpautop. Если кратко, то он создает лишние параграфы, если находит переносы строк. Практически для всех проектов на вордпрессе мы его сразу отключаем. Его отключение прописано в документации, нужно просто в файл functions.php добавить пару строк.
remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' );
Но у васфильтр был выключен, значит, копаем дальше.
Мы решили проверить, как эти элементы создаются. Так как "плашка" появляется при клике на чекбокс, значит, нужно изучать код javascript
Нашли кусок кода, который отвечает за создание плашки. Он довольно простой, но есть нюанс, который может влиять на то, что будет создано.
Вот тут мы берем текст рядом с чекбоксом и копируем в плашку. И как раз с innerText, который потом никак не обрабатывается (очищается), могут быть проблемы.
Чтобы понять, что идет не так, и почему проблема именно на каком-то разрешении, залогируем innerText в консоль браузера и посмотрим.
Разрешение 1200px
Разрешение 500px
Итак, мы видим, что на 1200px мы получаем текст без каких-либо пробелов, а на 500px вокруг текста появляется много лишних строк, которые потом браузер интерпретирует как переносы строк и добавляет <br>. Почему так происходит именно на определенном разрешении, и точно ли лишние теги добавляет браузер (а не вордпресс), я не знаю, но зато знаю, как это все исправить.
display: none
let textBadge = checkBox.parentNode.textContent.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()
Теперь красота! Рады помочь.