Как white-space помогло решить проблему с отображением кода на сайте

tinkoff дебет
Тинькофф дебетовая карта

Здравствуйте, уважаемые друзья! Свойство white-space помогло решить проблему с отображением кода на страницах сайта. Как вы могли заметить, я недавно сменил шаблон, о намерениях сообщал уже давным-давно, но жизненные обстоятельства внесли свои планы и отсрочили этот момент на несколько лет.

После смены шаблона не всё прошло гладко, и одним из «косяков» стало отображение кода в статьях. У меня много статей, где я делюсь кодами для решения определённых задач. И для его дальнейшего использования нужно правильно кодом поделиться, так как если просто вставить код в статью, WordPress заменить кавычки, сделает переносы и код перестанет работать.

В моём прошлом шаблоне вывод кода был реализован в тегах <pre> с присвоением стилей оформления в CSS. Но, как вы знаете, стили наследуют более старшие, родительские, и это  нужно учитывать при работе. Так вот в новом шаблоне так и произошло, коды в статьях стали выходить за блок контента.

Как код выходит за пределы контейнера

Варианты с уменьшением шрифта, переносами на новую строку и другие ручные манипуляции – это неправильно и долго. К тому же малейшая ошибка в коде и он неработоспособный.

Мои сделки на Binance

binance биржа

Применение свойства white-space

Свойство white-space задаёт правила для обработки браузером множественных пробелов. Когда вы вставляете текст в html код, то браузер при его отображении обрезает множественные пробелы до одного. Такой код удобно вставлять в другие коды, но когда нужно отобразить нормально, по-человечески, это вызывает массу неудобств.

В моём случае поможет свойство с параметрами pre-wrap и break-spaces:

white-space: break-spaces;

Они сохраняют последовательность пробелов, и умещают содержимое в родительский контейнер. Есть небольшие отличия в работе с пробелами, но для меня подходят оба. Код в родительском контейнере не слипается в единую массу, понятен для изучения и применения на других сайтах.

Видео, где показана работа white-space

Так я решил задачу с отображением кода в своих статьях. В видео я демонстрирую работу свойства и привожу в пример источник, где можно подробно ознакомиться с каждым параметром.

Всем желаю удачи!

С уважением, Максим Зайцев

Понравилась статья? Поделиться с друзьями:
Добавить комментарий