多个div同行排列可自动换行，PDF导出显示异常如何解决

问题原因 #

原有布局混用了flex、float、table-cell三种布局规则，现代浏览器的渲染引擎做了容错处理所以前端显示正常，但Drupal常用的PDF生成工具（如wkhtmltopdf、dompdf）排版引擎容错能力弱，对inline元素宽度计算、table-cell宽度分配的逻辑和浏览器差异较大，最终导致短文本异常换行。

修复方案 #

统一使用flex布局实现需求，移除冲突的布局属性，增加PDF渲染兼容配置：

最终CSS代码 #

/* 外层容器配置 */
.visit {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
  box-sizing: border-box;
}

label {
  min-width: 110px;
  font-weight: 900;
  flex-shrink: 0; /* 禁止label宽度被压缩 */
}

.visit > span {
  flex: 1;
  width: 0; /* 解决flex子项溢出不收缩的兼容问题 */
}

/* 标签容器开启自动换行 */
.visit > span > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 4px;
}

/* 单个标签配置 */
.visit > span > div > div {
  white-space: nowrap; /* 单个标签内部禁止换行，避免短文本被拆分 */
}

老旧PDF引擎兜底兼容 #

如果使用的PDF生成工具对flex支持度较低，可额外增加print媒体查询的兼容样式：

@media print {
  .visit > span > div {
    display: block;
  }
  .visit > span > div > div {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
  }
}

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