使用wicked_pdf与wkhtmltopdf-binary时分页文本截断问题求助

阿华AIGC实验室

2026-5-26

解决wicked_pdf分页时文本截断的问题

嘿，我之前用wicked_pdf和wkhtmltopdf-binary的时候也踩过分页文本截断的坑，结合你的代码片段，给你几个针对性的解决方案：

调整page-break属性的应用层级
你现在给col类的div加了page-break-inside:avoid，但有时候这个样式会被框架的默认样式覆盖，或者没有作用到实际承载长文本的元素上。建议把长文本单独放在一个容器里，专门设置分页禁止属性，同时确保父元素没有overflow:hidden这类会干扰的样式：

<% if current_company&.po_term.present? %>
  <div class="row po_term_condtions" style="page-break-before: always;">
    <div class="col-lg-12 col-md-12 col-sm-12" style="page-break-inside: avoid; overflow: visible;">
      <strong> PO Terms: </strong>
      <!-- 给文本内容单独加一层容器，确保分页规则生效 -->
      <div style="page-break-inside: avoid;">
        <%= current_company&.po_term&.po_description.html_safe %>
      </div>
    </div>
  </div>
<% end %>

更新wkhtmltopdf二进制版本
旧版本的wkhtmltopdf对CSS分页属性的支持有不少bug，试试更新你的gem：
```
bundle update wkhtmltopdf-binary
```
如果是Linux环境，还可以试试wkhtmltopdf-binary-edge这个gem，它包含了更新的二进制版本，对现代CSS的支持更好。
清理浮动元素干扰
如果你的po_description里包含浮动元素（比如float:left/right），会直接打乱wkhtmltopdf的分页判断逻辑。给包含浮动元素的容器加上clearfix样式：
```
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
```
然后把这个类加到承载浮动内容的div上，确保页面布局不会被浮动元素破坏。
调整PDF页面边距
有时候文本截断是因为页面边距设置得太窄，导致内容被挤压到页面之外。在生成PDF的代码里调整边距参数：
```
render pdf: "purchase_order",
       margin: { top: 20, bottom: 20, left: 15, right: 15 },
       # 其他配置项...
```
给内容留出足够的上下左右空间，避免被页脚、页眉或者边距截断。