Здравствуйте, уважаемые друзья! Свойство white-space помогло решить проблему с отображением кода на страницах сайта. Как вы могли заметить, я недавно сменил шаблон, о намерениях сообщал уже давным-давно, но жизненные обстоятельства внесли свои планы и отсрочили этот момент на несколько лет.
После смены шаблона не всё прошло гладко, и одним из «косяков» стало отображение кода в статьях. У меня много статей, где я делюсь кодами для решения определённых задач. И для его дальнейшего использования нужно правильно кодом поделиться, так как если просто вставить код в статью, WordPress заменить кавычки, сделает переносы и код перестанет работать.
В моём прошлом шаблоне вывод кода был реализован в тегах <pre> с присвоением стилей оформления в CSS. Но, как вы знаете, стили наследуют более старшие, родительские, и это нужно учитывать при работе. Так вот в новом шаблоне так и произошло, коды в статьях стали выходить за блок контента.
Варианты с уменьшением шрифта, переносами на новую строку и другие ручные манипуляции – это неправильно и долго. К тому же малейшая ошибка в коде и он неработоспособный.
Применение свойства white-space
Свойство white-space задаёт правила для обработки браузером множественных пробелов. Когда вы вставляете текст в html код, то браузер при его отображении обрезает множественные пробелы до одного. Такой код удобно вставлять в другие коды, но когда нужно отобразить нормально, по-человечески, это вызывает массу неудобств.
В моём случае поможет свойство с параметрами pre-wrap и break-spaces:
white-space: break-spaces;
Они сохраняют последовательность пробелов, и умещают содержимое в родительский контейнер. Есть небольшие отличия в работе с пробелами, но для меня подходят оба. Код в родительском контейнере не слипается в единую массу, понятен для изучения и применения на других сайтах.
Видео, где показана работа white-space
Так я решил задачу с отображением кода в своих статьях. В видео я демонстрирую работу свойства и привожу в пример источник, где можно подробно ознакомиться с каждым параметром.
Всем желаю удачи!
С уважением, Максим Зайцев
