Question

我正在使用pygments在静态HTML页面上显示CSS样式的代码，但是遇到了一个奇怪的错误，它在Safari中错误地呈现了<pre>标记。正如您在表格中向右滚动时所看到的那样fiddle，木炭背景（在<pre>上设置）在文本停止之前停止，文本的其余部分不是很可读的。

一些观察结果：

这适用于Chrome
如果我删除<pre></pre>内的空白行，则一切按预期工作
删除<span class="s"></span>也适用
将overflow: auto添加到<pre>会给我2个滚动条，它们彼此独立滚动

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

我在OS X 10.11.4上的Safari 9.1上试过这个。有谁知道发生了什么？

截图：

screenshot

Answer 1

更新了答案

根据pygment.org上的文档here，您可以控制结果HTML，但正如您所指出的那样，它是有限的。

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

结构是;

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

请参阅此FIDDLE。

在以下示例中 - first-child具有内联块;

请参阅此FIDDLE

原始答案

使用带有nowrap的white-space属性。

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

JS Fiddle

下面的小提琴演示如何匹配单行或多行的行高;

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

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

Answer 2

查看以下代码段，看看是否有帮助。请注意，我将原始可滚动内容从整个框更改为代码区（不包括行号）。

适用于Chrome，Firefox和Safari，经过测试。它也适用于较大的行号。

<强> jsFiddle

＆＃13;

.highlighttable {
  border-radius: 5px;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.highlighttable .linenos {
  background-color: #C1C2C3;
  padding: 0 5px;
  width: 1%;
  text-align: right;
}
.highlighttable .code {
  background: #343642;
  position: relative;
}
.highlighttable .highlight {
  overflow-x: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.highlighttable .highlight pre {
  color: #C1C2C3;
}

＆＃13;

<table class="highlighttable">
<tr>
<td class="linenos">
  <div class="linenodiv"><pre>1
2</pre>
  </div>
</td>
<td class="code">
  <div class="highlight"><pre>

let variable = <span class="s">&quot;A very long string goes here and it doesn't span multiple lines but makes the table/div scroll (incorrectly)  instead.&quot;</span></pre>
  </div>
</td>
</tr>
</table>

＆＃13;

Answer 3

您必须添加$aa = 'come on\n'; var_dump(trim($aa,'\n'));才能使其适用于Safari。在这里你必须添加它：

overflow-wrap: break-word

Answer 4

如果您将代码从.highlighttable复制到.highlight pre的底部，则可以在Safari中正常工作，包括弯曲的边框。 JSFiddle

Answer 5

也许我没有理解你的问题，但如果你将背景颜色应用到highlighttable课程，额外的空间就不会显示出来（即使它仍然在那里，它会＆＃39 ;只是一个修复）。

这是您更新的代码：

＆＃13;

.highlighttable {
  border-radius: 5px;
  overflow-x: auto;
  display: block;
  border-collapse: collapse;
  border-spacing: 0;
  /* Just put your grey background here */
  background: #343642;
}

.highlighttable .linenos {
   background-color: #C1C2C3;
   padding: 0 5px;
}

.highlight pre {
  color: #C1C2C3;
}

＆＃13;

<table class="highlighttable">
<tr>
<td class="linenos">
  <div class="linenodiv"><pre>1
2</pre>
  </div>
</td>
<td class="code">
  <div class="highlight"><pre>

let variable = <span class="s">&quot;A very long string goes here and it doesn't span multiple lines but makes the table/div scroll (incorrectly)  instead.&quot;</span></pre>
  </div>
</td>
</tr>
</table>

＆＃13;

水平滚动表

5 个答案: