如何避免打印时最后出现多余的空白页？顺风CSS

Question

使用顺风CSS，似乎没有任何特殊原因，最后会出现一个额外的空白页面。 我尝试过使用

last:break-after-auto

和

last:hidden

但似乎对打印没有影响

<div class="hidden print:inline">
            <div class="m-0 last:break-after-auto">
                @for (week of store.weeks; track week; let weekIndex = $index)
                {
                    <div class="grid min-h-screen grid-cols-[0.7in_repeat(6,1fr)] grid-rows-[0.4in_0.25in_6.5in]">

                        <div class="col-span-2 col-start-1 mt-5 self-center text-xl font-semibold">Training Schedule {{store.currentSchedule.title}}</div>
                        <div class="col-start-7 self-center text-xl font-semibold">Week {{weekIndex + 1}}</div>

                        @for (day of store.mtcInfoService.info.days; track day)
                        {
                        <div class="col-start-{{day.id}}" [class.hidden]="day.id === 1">{{day.name}}</div>
                        }

                        <div class="col-span-7 grid max-h-[8in] w-full grid-cols-[0.7in_repeat(6,_1fr)] grid-rows-[repeat(68,_1fr)]">

                            @for (hour of store.hours; track hour; let last = $last)
                            {
                            <div class="col-start-1 row-span-4 border-l-[1px] border-t-[1px] border-solid border-black pr-1 text-right" [ngClass]="{'border-b-[1px] border-solid border-black': last}">{{hour.label}}</div>
                            }

                            @for (event of week; track event; let eventIndex = $index)
                            {
                            <div class="border-t-[1px] border-solid border-black pl-[0.75mm] text-sm leading-[10px]" [ngStyle]="getStyle(event,week,eventIndex)">{{event.title}} {{event.startDate | date : 'shortTime':'UTC'}}-{{event.endDate | date : 'shortTime':'UTC'}}</div>
                            }

                            @for (day of store.mtcInfoService.info.days; track day)
                            {
                            <div [class.hidden]="day.id === 1" [class.border-r]="day.id === 7" class="row-span-full w-fit border-[1px] border-r-0 border-solid border-black" [attr.day]="day.name"></div>
                            }
                        </div>
                    </div>
                }
            </div>

当我尝试

last:hidden

时，它隐藏了倒数第二页

Answer 1

这是您的代码的修订版本，其中包含一些建议：

HTML
<div class="hidden print:inline print:m-0 print:p-0">
  <div class="m-0 last:break-after-auto">
    @for (week of store.weeks; track week; let weekIndex = $index)
    {
      <div class="grid min-h-screen grid-cols-[0.7in_repeat(6,1fr)] grid-rows-[0.4in_0.25in_6.5in]">

        <div class="col-span-7 grid max-h-[8in] w-full grid-cols-[0.7in_repeat(6,_1fr)] grid-rows-[repeat(68,_1fr)]">

          @for (hour of store.hours; track hour; let last = $last)
          {
            <div class="col-start-1 row-span-4 border-l-[1px] border-t-[1px] border-solid border-black pr-1 text-right" [ngClass]="{'border-b-[1px] border-solid border-black': last}">
              {{hour.label}}
            </div>
          }

          @for (event of week; track event; let eventIndex = $index)
          {
            <div class="border-t-[1px] border-solid border-black pl-[0.75mm] text-sm leading-[10px] page-break-avoid: always" [ngStyle]="getStyle(event,week,eventIndex)">
              {{event.title}} {{event.startDate | date : 'shortTime':'UTC'}}-{{event.endDate | date : 'shortTime':'UTC'}}
            </div>
          }

          @for (day of store.mtcInfoService.info.days; track day)
          {
            <div [class.hidden]="day.id === 1" [class.border-r]="day.id === 7" class="row-span-full w-fit border-[1px] border-r-0 border-solid border-black" [attr.day]="day.name"></div>
          }
        </div>

        <div class="print:block h-2"></div>
      </div>
    }
  </div>
</div>

请记住在浏览器的打印预览模式下测试这些更改，看看多余的空白页是否得到解决。您可能需要尝试不同的样式和分页符控件属性组合才能实现所需的布局。