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