Wkhtmltopdf中word-break: break-all失效问题求助

在使用Wkhtmltopdf将HTML转为PDF时，设置的word-break: break-all属性完全不生效——内容在浏览器中能正常换行适配容器，但PDF输出里文本直接超出范围，不符合预期。

相关HTML代码 #

<div class="ticket-info-defense-name">
2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51 2024-03-09 QWERTYUIO 5B5B4688 BC5B9C51
</div>

相关CSS代码 #

.ticket-info-defense-name {
   text-transform: uppercase;
   display: inline-block;
   width: 100pt;
   max-width: 100pt;
   font-size: 7pt;
   color: #a2a2a1;
   height: 41pt;
   overflow: hidden;
   text-align: justify;
   overflow-wrap: break-word;
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-all;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
 }

解决方案 #

1. 替换display: inline-block为display: block #

Wkhtmltopdf基于旧版WebKit，对inline-block元素的换行处理存在兼容问题，改为block能更稳定触发断行规则：

.ticket-info-defense-name {
   display: block; /* 替换原inline-block */
   /* 其他原有属性保留 */
}

2. 新增white-space: pre-wrap强制换行 #

强制让空白字符和换行规则生效，配合断词属性增强兼容性：

.ticket-info-defense-name {
   white-space: pre-wrap;
   /* 其他原有属性保留 */
}

3. 改用word-break: break-word替代break-all #

部分旧版WebKit对break-all支持不佳，换成break-word能更好适配长文本断行：

.ticket-info-defense-name {
   word-break: break-word; /* 替换原break-all */
   /* 其他原有属性保留 */
}

4. 调整Wkhtmltopdf命令行参数 #

添加JavaScript相关参数，确保页面样式加载完成后再转换：

wkhtmltopdf --enable-javascript --javascript-delay 1000 input.html output.pdf

5. 手动插入零宽空格（紧急方案） #

如果上述方法都无效，可在长文本的连续字符间手动插入零宽空格​强制断行：

<div class="ticket-info-defense-name">
2024-03-09 QWERTYUIO&ZeroWidthSpace; 5B5B4688&ZeroWidthSpace; BC5B9C51 ...
</div>

内容的提问来源于stack exchange，提问作者Maks Porvatov