Line numbers don't align on word-wrapping lines #102

Closed
lightswitch05 opened this Issue Dec 4, 2012 · 4 comments

Comments

Projects
None yet
3 participants
@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 line numbers

@nathany

This comment has been minimized.

Show comment
Hide comment
@nathany

nathany Dec 4, 2012

Contributor

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.

Contributor

nathany commented Dec 4, 2012

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 lightswitch05 referenced this issue in kwbock/clipster Dec 4, 2012

Merged

Turned off line-wrapping to fix #22 #31

@lightswitch05

This comment has been minimized.

Show comment
Hide comment
@lightswitch05

lightswitch05 Dec 4, 2012

Thanks @nathany - turns out Bootstrap's CSS sets

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

on all <pre> elements

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

This comment has been minimized.

Show comment
Hide comment
@korny

korny Dec 5, 2012

Member

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

Member

korny commented Dec 5, 2012

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

@korny korny reopened this Dec 5, 2012

@nathany

This comment has been minimized.

Show comment
Hide comment
@nathany

nathany Dec 5, 2012

Contributor

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.

Contributor

nathany commented Dec 5, 2012

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.

@korny korny closed this in f46a737 Jun 10, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment