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?

I think first you need to work out how you imagine this working. How would you get to the link if clicking on it didn't take you anywhere? How would you select the text if you can't click on it? — Giovanni B, Jul 19 '12 at 20:11

score 12 · Answer 1 · answered Jul 19 '12 at 20:33

12

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.

answered Jul 19 '12 at 20:33

Forte L.

2,772
16
25

4

Apparently this works on Chrome too. Thanks for the tip! – cvsguimaraes Sep 23 '17 at 11:26

score 8 · Answer 2 · answered Aug 14 '18 at 08:52

8

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;

}

answered Aug 14 '18 at 08:52

Tilak Bhandari

156
2
3

1

This goes some way there (lets you start selection part way through the link) but if you release the mouse while still over the link then the link is still followed. – sparrowt Feb 27 '19 at 15:16

score 2 · Answer 3 · answered Jul 19 '12 at 20:15

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.

score 1 · Answer 4 · answered Jul 19 '12 at 20:15

1

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.

answered Jul 19 '12 at 20:15

sachleen

30,730
8
78
73

this only work if you select the whole link, or from the middle to one end. If you select a phrase in the middle, it will trigger windows.location – Forte L. Jul 19 '12 at 20:24
1

Also if you use javascript to implement link functionality on regular text, you create a major accessibility issue for people with screen readers or folks who have javascript disabled in their browsers (per corporate policy or for security reasons.) – Roddy of the Frozen Peas Jul 19 '12 at 20:35
@ForteL., good catch. Roddy: yes. Like I said, I wouldn't do it this way, just offering a potential solution. – sachleen Jul 19 '12 at 20:38

score 0 · Answer 5 · answered Jul 19 '12 at 20:13

0

No, but you shouldn't have massive blocks of text in a link - a link should ideally be just one or two words, not an entire paragraph.

answered Jul 19 '12 at 20:13

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 6 · answered Jul 19 '12 at 20:16

I can't tell without seeing your site in action, but I suspect that the problem is that your link tag contains more than just the quote.

If the link shows as "To be or not to be--that is the question", then selecting it should be the same as selecting any other question. If the link is "Here's a great quote: 'To be or not to be--that is the question. Click here to do something else!" then they won't be able to select the text in the middle, which is all they're going to want.

Make sure that your link text is only the text that they want to select, and put anything else outside of the tags, and you'll be fine.

I think the OP wants to allow his/her users to select *any part* of the quote. — Roddy of the Frozen Peas, Jul 19 '12 at 20:36

score 0 · Answer 7 · answered Apr 09 '19 at 18:55

Say you had a "box" like call to action link, and the primary purpose and use for it is to bring the user to a new page. Equally important though, is a means to "select" some of that text (e.g. address, phone number, or in your case - lyrics) something as following works well.

The caveat being, the "selectable" text itself, is not clickable. But then again, for someone who has the intent of selecting the text that won't be a problem. For anyone else trying to hit that link, well, they'll have to click a tad beyond the selectable text boundaries.

<!-- See stylized version in CodePen link below -->
<div class="box-link">
  <a href="#" class="box-link__anchor"><span>Apple Park Visitor Centre</span></a>
  <span class="box-link__text">10600 North Tantau Avenue<br />Cupertino, CA 95014</span>
</div>

Link to CodePen:

https://codepen.io/mjoanisse/pen/YMNaae

Make Text in Link selectable with CSS

7 Answers7