Random extra space at end of horizontally scrollable table

Question

I'm using pygments to display CSS-styled code on a static HTML page, but am running into a weird bug that renders the <pre> tag wrongly in Safari. As you can see in this fiddle when you scroll to the right in the table, the charcoal background (which is set on the <pre>) stops before the text stops and the remainder of the text is not very readable.

Some observations:

• This works fine in Chrome
• If I remove the blank line inside the <pre></pre> everything works as expected
• Removing the <span class="s"></span> works as well
• Adding overflow: auto to the <pre> gives me 2 scroll bars that scroll independently of each other

I've reduced this problem as much as possible (as seen in the fiddle). The HTML output I can't change, but I can modify the CSS as much as I want, so that's the solution I'm looking for.

I tried this on Safari 9.1 on OS X 10.11.4. Does anyone understand what's going on?

Screenshot:

Answer 1

Updated Answer

According to the documentation here on pygment.org you have some control over the resultant HTML but as you pointed out it is limited.

I have used CSS pseudo and counter-increments for line numbers - being more robust and flexible. Counts are directly linked to each span and ignore anything that should not be a line number (eg comment or text) - as shown in the first example below.

The structure is;

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

See this FIDDLE.

---

In the following example - the first-child has an inline-block;

See this FIDDLE

---

Original Answer

Use the white-space property with nowrap.

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

JS Fiddle

Below fiddles demo how you can match line-heights for single or multiple lines;

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

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

1. Multiple Lines
2. Single Line