Использование свойства CSS размера табуляции для сохранения пробела
16 июля 2018 | Опубликовано в css | Нет комментариев »
По умолчанию страницы HTML при отображении пропускают все, что больше одного пробела, и не показывают лишние пробелы, чтобы не занимать больше места. Наиболее распространенный способ компенсировать это поведение — задать внутренний или внешний отступ влево или вправо от элемента как замену пробелам, и это является лучшим решением в большинстве случаев. Но бывают ситуации, в которых хотелось бы сохранить настоящие символы пробела, например, если это отступы перед строками кода. Код CSS предоставляет эту возможность с помощью свойства размера табуляции. Если нужно показать следующий код:
<pre><code>ol.generic-class { property: value; }</code></pre>
Можно сохранить табуляцию перед записью “property: value” с помощью свойства размера табуляции, которое поддерживается всеми браузерами, кроме Internet Explorer и Edge, а для браузера Firefox может быть нужна приставка производителя. Чтобы воспользоваться этим свойством и предоставить обходной путь для браузера Internet Explorer, зададим значения свойства, определяющего поведение пробелов, как pre, которое означает, что пробелы сохраняются в браузере, и зададим размер табуляции, равный 4 пробелам:
code { white-space: pre; tab-size: 4; }
Что создаст следующий визуальный результат:
Обратите внимание на то, что свойство white-space: pre задано на сайте jsfiddle по умолчанию, так что чтобы увидеть результат без его применения, нужно задать этому свойству другое значение: white-space: nowrap, с которым эта запись будет выглядеть следующим образом:
Также можно использовать содержимое псевдоэлементов :before или :after для создания пробелов вместо того, чтобы сохранять табуляцию. Обычно рекомендуется использовать внешние или внутренние отступы вместо этого, но такой вариант тоже возможен:
code:before { content: " "; whitespace: pre; }
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
- Использование разных способов применения стилей CSS
- Использование свойств задания вида подчеркивания ссылок
- Использование наборов изображений в HTML5
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191