Псевдоним с хромовой печатью с минимальными высотами

Question

Я использую стиль @media print для сжатия громоздкой страницы ion-input с, чтобы уменьшить количество страниц на 15 страниц.

Печать в PDF (предварительный просмотр и открытие сохраненного файла PDF) выглядит хорошо в Firefox v63,

, но вChrome v70 выдает псевдоним или полное отсутствие строки, когда я устанавливаю min-height, независимо от полей страницы Chrome None или Default.Я также видел, как он пропускает идентификатор, описание, название подэлемента или строку цены, если они попадают в разрыв страницы.

Есть ли способ предотвратить наложение или разрыв строк в Chrome вокруг автоматических переносов страниц?

-

Код:

@media print {
    ion-item, .item-inner, .input-wrapper, ion-input, input  {
        min-height: 23px !important; // causes line aliasing
        height: 24px !important;
        max-height: 25px !important;
        line-height: 26px !important;
    }
}

<ion-card *ngFor="let eachCard of myCards">
  <ion-row>
    <ion-col col-2>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.id"></ion-input>
        </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-11>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.description1"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.description2></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.description3"></ion-input>
        </ion-item>
    </ion-col>
  </ion-row>

  <div *ngFor="let eachSubitem of eachCard.subitems">
    <ion-row>
      <ion-col col-1></ion-col>
      <ion-col col-5>
          <ion-item>
              <ion-input type="text" [(ngModel)]="eachSubitem.name"></ion-input>
          </ion-item>
      </ion-col>
      <ion-col col-5>
          <ion-item>
              <ion-input type="text" [(ngModel)]="eachSubitem.altName"></ion-input>
          </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col col-1></ion-col>
      <ion-col col-3>
          <ion-item>
              <ion-input type="number" [(ngModel)]="eachubitem.price"></ion-input>
          </ion-item>
      </ion-col>
      <ion-col col-7>
          <ion-item>
              <ion-input type="text" [(ngModel)]="eachSubitem.unit"></ion-input>
          </ion-item>
      </ion-col>
    </ion-row>
  </div>
</ion-card>

Answer 1

Решено:

ion-item  {
    display: inline-block !important;
}