打印显示空白对角线截止

我想做一本可印刷的教堂歌曲集:

• 两列
• 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(不是打印预览)中,歌曲显示得很好。