Make Text in Link selectable with CSS

Question

I´m working on a site, which collects famous Quotes. The Text of the quote is a link to do something else [...] But I also wants, that the user can select and copy the text of the quote.

But in nearly every browser the user cannot easily select text in Links.

Is it possible to override this in CSS and make it possible to the user to select the text?

Answer 1

You can,

Step 1 :

Create an attribute draggable to anchor tag.

<a href="http://www.exaple.com" **draggable="false"**>Select Text From Here</a>

Step 2 :

Make cursor style auto & user-select must be text or all

a
{
    cursor: auto;
    -webkit-user-select: text;
    -moz-select: text;
    -ms-select: text;
    user-select: text;

}

Answer 2

In Firefox, you can select parts of the hyperlinks by pressing the Alt key and then selecting as usual with the mouse. So one option is to implement something similar using jQuery: if the Alt key is pressed (or a key that you assign) and the mouse pointer is over the link, then disable the link. When the key is released then enable the link. Of course you would have to tell your users how to make the selection.

Answer 3

This isn’t really a job for CSS, as this is functionality, not rendering. And it is a difficult issue, because a click on a link is supposed to mean following the link, and breaking this would create a major usability problem.

The best approach is to avoid making the quotations links and use links separately along with them. For example, the credits below a quotation, or the name of the cited resource in the credits, would be a natural link. And if you want a click to “do something else”, then perhaps you should use buttons, not links, associated with the quotations.

Answer 4

You can't. You can, however, make an element look like a link but use JS to actually handle the "link" part of it.

jQuery:

$(".q").click(function() {
    window.location.href=$(this).attr('data-link');
});

HTML:

<span data-link="link.html" class="q">text here</span>

CSS (to give it the "hand" cursor)

.q {
  cursor: pointer;
}

Demo

I would just keep the quote just text (no link) and then add a smaller link at the end for more info or whatever it may be.