CSS @page не применяется - PullRequest
Новая
       13

CSS @page не применяется

0 голосов
/ 20 апреля 2019

У меня есть этот огромный текстовый блок на страницах, которые нужно распечатать, и я хочу добавить верхнее и нижнее поле, чтобы текст не располагался так близко к краю печатной страницы. Поскольку эти текстовые блоки не могут быть разбиты на теги, поскольку они агрегированы искателем RSS-канала, я попытался использовать @page в css, но пока безуспешно. Я использую Chrome и предварительный просмотр принтера. Я использую WordPress, если это имеет значение.

Вот изображение того, как оно выглядит в PDF. Блок печатного текста

Я попытался вставить его в @media screen или @media print, добавив !important, и вот уже час ищу в сети ...

Я добавил этот CSS (и пробовал другие варианты) в свой файл CSS, но он не применяется. Все другие стили печати @media работают. 

@page { 
  margin-top: 2cm;
  }

Будут благодарны любые указатели, поэтому я могу добавить поля сверху и снизу к напечатанным страницам.

1 Ответ

0 голосов
/ 20 апреля 2019

Для адресации печатных элементов обычно используется @media print, как вы уже писали. Но кроме того, вам нужен селектор внутри этого медиа-запроса. Так что, если эти текстовые блоки имеют, например, класс .my_class, CSS будет 

@media print {
  .my_class {
    margin-top: 2cm;
  }
}

Если у текстовых блоков нет классов, рассмотрите возможность применения к ним классов в HTML или в сценарии, который их генерирует.

Добавление после комментария:

Вы пытались объединить @media print и @page? Вот так (я обычно так и использую): 

@media print {
    @page  { 
        margin-top: 2cm;
    }
}
...