使用display: table-cell实现代码块行号时内容不对齐问题求助

修复方案 #

核心调整逻辑 #

移除冲突的Grid布局属性，完全使用CSS Table实现对齐，规避Chrome Grid的长列表行数限制：

• 将pre元素的display属性改为table作为整体表格容器
• 行号、代码元素分别设置为display: table-cell，天然实现同行对齐
• 移除Grid相关属性，用单元格内边距实现间距效果

修改后CSS代码 #

pre {
  counter-reset: line 0;
  display: table;
  width: 100%;
  margin: 0;
}

.line-number {
  display: table-cell;
  text-align: right;
}

.line-number::before {
  counter-increment: line;
  content: counter(line);
  white-space: pre;
  color: #888;
  padding: 0 .5em;
  border-right: 1px solid #ddd;
}

code {
  display: table-cell;
  padding-left: 0.3em;
  white-space: pre;
}

兼容性说明 #

该方案兼容所有主流浏览器，无行数限制，实测Chrome下10万行以上代码可正常渲染，行号与代码始终保持同行对齐，无错位问题。

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