Html 如何在PDF中使用CSS断开页面 如何避免我的QRoad贴纸剪在中间？ 我正在使用awesomegem-wicked-pdf生成pdf 我试图在之后添加分页符，但我不知道它是如何工作的。。。。 非常感谢您的帮助

这里是pdf的样式，它位于vendor/assets/pdf.scss中

.sticker {
    border: 1px dashed #111;
    padding: 10px;
    height: 260px;
    width: 170px;
}

table.qrcode {
  border-width: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 10px;

  td {
    border-width: 0;
    border-style: none;
    border-color: #0000ff;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    width: 4px;
    height: 4px;

    &.black {
      background-color: #000 !important
    }

    &.white {
      background-color: #fff !important
    }
  }
}

这是我的应用程序/视图/贴纸/show.pdf.erb

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="content">
    <div id="stickers">
        <div class="row">
        <% @sticker.quantity.times do  %>
            <div class="col-xs-3">
                <div class="sticker">
                    <div class="row">
                        <div class="col-xs-12">
                            <%= render_qr_code_small("https://super-shop.herokuapp.com/admin/products/#{@sticker.product}") %>  
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list list-unstyled">
                                <li><strong><%= number_to_currency_euro @sticker.product.price %></strong></li>
                                <li><%= @sticker.product.title %> - <%= @sticker.product.color %></li>
                                <li><%= @sticker.product.brand %></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        <% end %>
    </div>  
    </div>
</div>

-

有一些css可以避免中断：

.nobreak {
  page-break-inside: avoid !important;
}

并将

nobreak

添加到不希望拆分的div中