search
Отображение элемента при печати (display-print)
https://dev.ru.simai.io/ru/ui/utility/print/display-print.php
Модификаторы позволяют изменить способ отображения элемента только во время печати страницы. Это полезно, когда вам нужно скрыть или показать определённые элементы при выводе на печать.
Классы и их значения
| Класс | Значение |
|---|---|
| .print-block | Во время печати элемент отображается как блочный (display: block;) |
| .print-inline-block | Во время печати элемент отображается как блочно-строчный (display: inline-block;) |
| .print-inline | Во время печати элемент отображается как строчный (display: inline;) |
| .print-flex | Во время печати элемент отображается как flex-контейнер (display: flex;) |
| .print-inline-flex | Во время печати элемент отображается как блочно-строчный flex-контейнер (display: inline-flex;) |
| .print-table | Во время печати элемент отображается как таблица (display: table;) |
Описание
Данные модификаторы применяют стили отображения только при печати, не влияя на отображение при просмотре страницы в браузере. Это даёт возможность управлять контентом для печати, скрывая ненужные элементы или меняя их структуру.
Синтаксис
print-block– при печати элемент будет блочным.print-inline-block– при печати элемент будет блочно-строчным.print-inline– при печати элемент будет строчным.print-flex– при печати элемент станет flex-контейнером.print-inline-flex– при печати элемент станет блочно-строчным flex-контейнером.print-table– при печати элемент будет отображаться как таблица.
Пример использования
<div class="hidden print-block">
<!-- Этот элемент будет скрыт на экране, но показан как блочный при печати -->
Контент, который нужен только при печати
</div>
<div class="print-inline-flex">
<!-- При печати этот элемент будет отображаться как inline-flex-контейнер -->
<span>Элемент 1</span>
<span>Элемент 2</span>
</div>