How to ensure that only the intended text can be selected?

Question

My goal is to create rows of lines (with line numbers) such that:

• line numbers line up with the appropriate line even if each "line" exceeds its parent element's width and wraps to a new physical line
• only the text is selected, not the line numbers
• whitespace is preserved both within and before each line

I've got a snippet that accomplishes some of these goals on specific browsers:

.code { counter-reset: line; }
.line { counter-increment: line; white-space: pre-wrap; }
.line:before { content: counter(line) " - "; }

<div class="code">
  <div class="line">Line 1</div>
  <div class="line">  Line 2</div>
  <div class="line">Line 3</div>
</div>

Here's the problem:

• everything works in Chromium
• everything works in Firefox except for the third goal - whitespace at the beginning of the line is truncated for some reason
• everything works in IE except for the second goal - line numbers are included in the selection

(I don't have access to a Mac, so I have no idea about Safari. I'm too lazy to test Opera.)

Is there a way to make this work in all common browsers?

Answer 1

Short answer: you probably can't get IE & FF to behave the same as Chrome, or even each other.

Opera is essentially Chrome at this point (even using Google's engine, not Webkit), so consider it tested if Chrome works.

Longer info i found...
This question reveals two bad behaviors from the other two browsers:

1. MSIE:
   1. It's natively selecting generated content in the ::before pseudo-element. By my understanding (and that of the other browsers) the rules say it's NOT supposed to: it's not part of the DOM, it's generated by CSS.
   2. There's an HTML attribute unselectable="on" which generally gets IE to stop selecting text. However, if you open this question in IE, you'll see you can select the "unselectable" text if you start on the block before & continue dragging past it, or right-click inside the box & choose "Select All" then Copy. So it's not even mildly bullet-proof. Besides, an attribute doesn't help you protect a pseudo-element.
   3. There's CSS user-select:none (and vendor prefixes), but when trying it in a JSFiddle with IE, i saw no effect.
   4. The last option for IE is Javascript: onselectstart="return false", which is the perfect chainsaw for clipping coupons.
2. Firefox:
   1. It doesn't copy formatting, even when CSS dictates the display should show white-space. i saw a Bugzilla issue on this dating back to 2001(?!??!!), with comments over the last 14 years arguing why pre white-space should be preserved to the clipboard, but Mozilla mostly ignoring it.
   2. i have an add-on to copy as plain-text, but i believe it strips markup from a Firefox-originated copy, so the add-on doesn't receive the white-space either.
   3. There's an about:config option that tells Firefox whether to take the space next to a word when double-clicking to select it, but it's utterly useless here. i mention it only to exclude it. :(