Однажды один мой знакомый обратился к мне с вопросом, почему на смартфоне текст его сайта на WordPress “вылезает” за экран, перенос не срабатывает.
Мне стало интересно и я приступил к расследованию.
Первое: Я стал проверять поступившую информацию, и да — она подтвердилась.
Второе: В визуальном редакторе перешел в режим HTML
В режиме HTML я увидел примерно следующее:
Третье: Эта штука ни что иное как:
Nbsp (англ. non-breaking space) — символ неразрывного пробела в тексте. В отличие от обычного пробела, не даёт программам отображения и печати разорвать строку в месте, где расположен.
Виновник был найден.
Четвертое: В режиме визуального редактирования никаких nbsp нет.
Пятое: Ох уж этот гугль.
Я стал искать через гугль что то про «WordPress вставляет nbsp в текст.» и нашел массу страниц на которых обсуждается это вот уже десяток лет.
Например:
или:
Получается, что для того чтобы как то побороть этот nbsp придумывают специальные функции в php и прочие фокусы обвиняя WordPress в том, что «WordPress вставляет nbsp» вместо пробела на свое усмотрение.
Шестое: Разбираемся. Когда я набирал текст на клавиатуре, то при переходе в режим редактирования HTML и обратно никаких «фокусов» не было. А вот при работе с текстом на который указывал приятель — ситуация подтверждалась.
Начинаем охоту за nbsp.
Седьмое: Для поиска скрытых символов я решил воспользоваться приложением Notepad++ там в отличии от обычного блокнота из Windows есть соответствующая функция.
включаем
Как говорится — «узрите разницу».
Восьмое: Адвокат WordPress
Друг пояснил, что текст по которому он обратился был им набран не на клавиатуре, а был скопирован и вставлен в режиме визуального редактора.
Эксперимент с Notepad++ показал что этот NBSP был в этом тексте. Но в режиме визуального отображения отличить обычный пробел от неразделяемого пробела не представилось возможным. И поэтому вина пала на WordPress который по сути работал ровно так как и должен. Если ему вставляют NBSP то он есть если вставляют простой пробел — то он и есть. И никаких «фокусов» по сути не нужно. Нужно контролировать что вставляется.
Девятое: Что ж делать.
И так задача — заменить непереносимый пробел на обычный — на котором система может сделать перенос текста.
Тут нам на помощь вновь приходит Notepad++
В графе 1 — найти вставляем NBSP — (можно скопировать из самого текста).
В графу 2 — заменить на: вставляем просто пробел с клавиатуры.
Жмем кнопку заменить всё.
И получаем текст с обычными пробелами вместо непереносимых.
Далее вставляем этот текст на сайт через редактор WordPress. И ничего никуда на телефоне не уезжает за экран. — Profit!
ссылка на оригинал статьи https://habr.com/ru/articles/1025762/