white-space: pre-wrap导致LibreOffice Wiki表格特定列行距过大问题

问题场景 #

• 基于Tabulator.js重构LibreOffice Wiki语言表格，组件从HTML表格加载数据
• 为部分列的自定义格式化器添加white-space: pre-wrap样式
• 仅最后一列“Additional language extensions”出现莫名大行距，Firefox和Chromium均复现；移除该样式后行距恢复正常，但相同样式的前三列无此问题

原因分析 #

核心问题出在最后一列的原始HTML数据中存在多余的换行符或连续空白字符。white-space: pre-wrap会保留文本中的所有空白（包括换行、连续空格），这些冗余空白被渲染后撑开了单元格行距；而前三列的原始数据无此类冗余空白，因此样式表现正常。

解决方法 #

方法1：清理原始数据 #

直接编辑原始HTML表格中“Additional language extensions”列的单元格内容，删除多余的换行、连续空格等无效空白字符。

方法2：格式化器中处理内容 #

在自定义格式化器里先清理内容的冗余空白，再应用样式：

function langExtFormatter(cell) {
  // 替换多余空白为单个空格并去除首尾空白
  const cleanedText = cell.getValue().replace(/[\n\r\s]+/g, ' ').trim();
  return `<div style="white-space: pre-wrap;">${cleanedText}</div>`;
}

方法3：CSS强制修正行高 #

通过CSS为最后一列单元格手动设置行高，抵消冗余空白的影响：

/* 针对Tabulator最后一列单元格 */
.tabulator .tabulator-row .tabulator-cell:last-of-type {
  white-space: pre-wrap;
  line-height: 1.5; /* 可根据实际需求调整数值 */
}

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