Html 水平滚动表格末尾的随机额外空间

我使用pygments在静态HTML页面上显示CSS样式的代码，但遇到了一个奇怪的错误，在Safari中错误地呈现了

标记。如您在表格中向右滚动时所见，木炭背景（在

上设置）在文本停止之前停止，文本的其余部分不太可读

.highlight pre {
  color: #C1C2C3;
  overflow-wrap: break-word;
}

<pre>
    var = <span></span><span></span><span></span>
</pre>

一些意见：

• 这在铬上很好用
• 如果在代码< >代码>中删除空白行>所有的工作都如预期的

.highlight pre {
    color: #C1C2C3;
    white-space: nowrap;
}

• 删除
  也可以
• 将

  溢出：auto

  添加到
  中，可以得到两个彼此独立滚动的滚动条

.highlight pre {
    color: #C1C2C3;
    white-space: nowrap;
    margin:0;
    line-height: 2;
}

.highlighttable .linenodiv pre {
    line-height: 2;
    margin:0;
}

我已经尽可能地减少了这个问题（如小提琴中所示）。HTML输出我无法更改，但我可以根据需要修改CSS，所以这就是我正在寻找的解决方案

我在OSX10.11.4上的Safari9.1上试过这个。有人知道发生了什么吗

屏幕截图：

---

您必须添加

溢出包装：break word

，使其在safari上也能工作。您必须在此处添加：

 .highlight pre {
   color: #C1C2C3;
   overflow-x: auto;
}

---

如果您将代码从

.highlighttable

复制到

.highlight pre

的底部，它在Safari中可以正常工作，包括弯曲的边框

更新答案

根据pygment.org上的文档，您可以控制生成的HTML，但正如您所指出的，它是有限的

我对行号使用了CSS伪增量和计数器增量-更健壮、更灵活。计数直接链接到每个跨度，忽略任何不应该是行号的内容（如注释或文本）-如下面的第一个示例所示

结构简单

下面的提琴演示了如何匹配单个或多个线条的线条高度

---

设置

overflow-x：自动
Fiddle:
也许我不理解您的问题，但是如果您将背景色应用于
highlighttable
类，则不会显示额外的空间（即使它仍然存在，这只是一个修复）

以下是您的更新代码：


.highlighttable{
边界半径：5px；
溢出-x：自动；
显示：块；
边界塌陷：塌陷；
边界间距：0；
/*把你的灰色背景放在这里*/
背景#343642；
}
.highlighttable.线路号{
背景色：#C1C2C3；
填充：0 5px；
}
.突出显示预{
颜色：#C1C2C3；
}

1.
2.
let variable=“此处有一个很长的字符串，它不跨越多行，而是使表格/div滚动（不正确）。”
查看以下代码片段，看看是否有帮助。注意，我将原来的可滚动内容从整个框更改为仅代码区（不包括行号）

经过测试，它在Chrome、Firefox和Safari上运行良好。它也适用于较大的行号



.highlighttable{
边界半径：5px；
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
}
.highlighttable.线路号{
背景色：#C1C2C3；
填充：0 5px；
宽度：1%；
文本对齐：右对齐；
}
.highlighttable.代码{
背景#343642；
位置：相对位置；
}
.highlighttable.高亮显示{
溢出-x：自动；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
.highlighttable.突出显示前{
颜色：#C1C2C3；
}

1.
2.
let variable=“此处有一个很长的字符串，它不跨越多行，而是使表格/div滚动（不正确）。”
你能分享一个屏幕截图吗？从我的角度看一切都很好Firefox/Mac看起来不错，但我不想让它包装，我只想让
进一步扩展，使可滚动区域更大是的，但现在我有2个滚动条（表中1个，前
中1个），这看起来不太好，这似乎只有在CSS中指定了行数时才起作用。事实上，这可能是任何数量的行，它应该工作。我很确定这是我提供的基于您的结构。给我一个例子，我会让它工作的。在你给的最后一把小提琴中，你使用了多个
s。我无法控制HTML，因为我正在使用
pygments
生成此HTML。您更新的答案似乎正是我想要的。今天晚些时候我会尝试一下，然后再报告。这看起来效果很好，但我选择将奖金奖励给另一个答案，因为该答案只在表的代码部分滚动，行号保持不变。谢谢你的努力！是的，这也是我找到的最好的解决办法。问题是，如果你向右滚动，然后向左滚动，它会反弹，行号列左侧的“反弹”区域也会有深炭色。相反，我希望它是白色/透明的。那么，我认为@Jabuka的最后一次更新满足了您的需要。在您的示例中也获得了两个滚动条（在
pre
和表中）。它在IE 11上没有按预期工作，我将看看是否可以对此进行修复。谢谢，我将在今天晚些时候的实际项目中尝试实现这一点。我可以忍受它在IE上看起来不太好。这几乎是完美的，我唯一不能完全弄清楚的是为什么边界半径不起作用（在Chrome和Safari中）。有什么想法吗？我认为边界半径在元素上不起作用，之前您将它重置为“显示：块”，并且它有背景色，这使它可以工作。但将其更改为block将使s匿名，并可能使事情表现不同。您可以将半径应用于s，而不是调整，看它是否工作良好。这非常有效，甚至更好，因为它只滚动表的代码部分。非常感谢！