How to exclude portions of text when copying

Im trying to make some text non-copyable, my aim isn't to stop people from copying text from my website but more to make it easier to use. I have a list of files with file size's but I want to only copy the file names and not the file size.

So far i'v tried a few different methods but non have worked, I have managed to get the text non-selectable with CSS user-select but I can still copy the file size when I select two or more rows.

I just tried using a button to prevent the copying, which didn't work ether, any ideas?

<a href="h开发者_如何学Gottp://10.10.10.1/links/file.doc"file.doc</a>
 <button type="button" disabled="disabled" id="filesize">6 MB</button><br \>

Target browser is Safari on the Mac, so experimental CSS3 or HTML5 commands that work on the latest Safari is fine.

(Thanks mvds for the suggested title, and one solution)

A fairly hacky method to make this work is using ::before or ::after pseudo elements to insert your text using css content: property.

HTML:

<a href="http://10.10.10.1/links/file.doc">file.doc</a>  
<button type="button" disabled="disabled" id="filesize"><i></i></button>

CSS:

button i:before {
 content: '6 MB';
}

Pros: It works: it doesn't get copied to the clipboard even when selecting multiple rows.

Cons: Pseudo elements require special care for CSS styling since they are inserted outside the normal document flow. Using the content: property for multiple elements would also require custom tags or inline css.

Ugly hack alert: create 2 versions of your text, one with and one without the sizes, otherwise identical, and put them in overlapping divs, with the version without sizes having a higher z-index.

The better solution, maybe not cross-browser, is to add an

<input type="text" value="(6 MB)" style="border:0; ...">

I suggest renaming the question "how to exclude portions of text when copying" because as it stands now, it sounds like you're looking for the average hopeless copy-protection scheme, while the question is quite interesting.

Use a span (or any text container really) and the unselectable attribute, like this:

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span unselectable="on">6 MB</span>

This won't work everything, but since you have a specific browser target, this will work just fine for your situation :)

To easily support a few more browsers while you're at it, you can throw some CSS in there, first define a class like this:

.unselectable { 
  user-select: none; 
  -moz-user-select: none; 
  -khtml-user-select: none; 
}

Then assign it as well, like this:

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span class="unselectable" unselectable="on">6 MB</span>