打印显示空白对角线截止

Question

我正在尝试制作一本可打印的教堂歌集：

• 两列
• html页面是通过Rails渲染的，但是每首歌曲都是React组件

该视图具有以下代码：

<div class='print-book'>
  <%= @song_data.sort_by { |data| data[:reference].index.to_i }.map do |song_data| %>
    <div class='print-song'>
      <div class="song-number"><%= song_data[:reference].index %></div>
      <%= react_component(
        'SongDisplay',
        lyrics: song_data[:song].lyrics
      ) %>
    </div>
  <% end %>
</div>

CSS：

.print-book {
  column-count: 2;
}

.print-song {
  page-break-inside: avoid;
}

.print-section {
  page-break-inside: avoid;
}

但是从屏幕截图中可以看到，当我尝试打印时，预览会在页面上显示对角线切口，从而使页面上的很大一部分空白。

关于什么原因的任何想法？在html（非打印预览）中，歌曲会正常显示。