Line numbers don't align on word-wrapping lines

[lightswitch05]

When the code line is longer than the div's width, it has to line wrap. When using line numbers, this causes the numbers to become miss-aligned with the code lines. It also causes 2 digit line numbers to appear 1-digit per line.

Live Example

Original issue in Clipster

Screenshot

[nathany]

Perhaps try a overflow: auto CSS attribute to cause it to scroll instead of wrap?

From the way the code is breaking, I wonder if there is a word-wrap: break-word or word-break: break-all in the CSS somewhere? That probably isn't desirable.

[lightswitch05]

Thanks @nathany - turns out Bootstrap's CSS sets

word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;

on all <pre> elements

[korny]

Damn, that's unfortunate. Since Bootstrap is so popular, CodeRay's stylesheet should overwrite these values, just to be safe.

[nathany]

It's actually part of normalize.css which a number of frameworks use:

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Assuming CodeRay's CSS is loaded after, it could override this behavior.