Make text in the link selected using CSS

Question

I am working on a site that collects famous quotes. Quote text is a link to do something else [...] But I also want the user to be able to select and copy the quote text.

But in almost every browser, the user cannot easily select the text in the links.

Is it possible to override this in CSS and provide the user with the ability to select text?

Answer 1

In Firefox, you can select parts of hyperlinks by pressing the Alt key and then selecting as usual with the mouse. Thus, one of the options is to implement something similar using jQuery : if the Alt key (or an assigned key) is pressed and the mouse pointer is located on a link, disable this link. When the key is released, enable communication. Of course, you must tell your users how to make a choice.

Answer 2

This is not work for CSS, as it is functionality, not rendering. And this is a difficult problem, because clicking on a link should mean the next link, and its violation will create a serious usability problem.

The best approach is to avoid citations and use links separately with them. For example, loans below the quote or the name of the specified resource in loans would be a natural reference. And if you want to click "do something else," then perhaps you should use the buttons, not the links associated with the quotes.

Answer 3

You can not. However, you can make the element look like a link, but use JS to actually handle the “link”.

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 a "manual" cursor)

 .q { cursor: pointer; } 

Demo

I would just save the quote only text (without a link) and then add a smaller link at the end for more information or whatever might be.

Answer 4

You can,

Step 1:

Create an attribute draggable to snap the tag.

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

Step 2:

Make the cursor style automatically and the user must select text or all

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

Answer 5

No, but you should not have massive blocks of text in the link - the link should ideally be just one or two words, not a whole paragraph.

Answer 6

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

If the link is displayed as "To be or not to be - this is a question", its choice should be the same as the choice of any other question. If the link "Here is 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, and that’s all they need.

Make sure your link text is just the text they want to select, and put anything else outside the tags, and everything will be alright.

Answer 7

Here is the method I came up with.

It uses <span> instead of the <a> tag, but behaves like a regular link with some bonuses. When you view the text, there is a timeout of 500 milliseconds, which will change the cursor to the text selection cursor. Clicking and dragging the text does not cause a click action, however double-clicking on the text (to select whole words) still causes the click event. It can be improved, but it works well and can be used in production.

Another opportunity to do it even better when the timeout is executed, it also shows a small clipboard icon in the upper right corner of the button that they can click to copy the text to the clipboard. When you .mouseout() button, it will hide this clipboard icon.

In addition, another function may be to clear the selection of text when the mouse leaves the button. ( Clear text selection using JavaScript )

HTML

 <span data-href="javascript:alert('This is the click action.');" class="link selectable"> <span> [e-mail] </span> </span> 

CSS

 .link { font: 16px/0 Tahoma, sans-serif; padding: 15px 30px; border: 1px solid #0079be; border-radius: 4px; color: #0079be; cursor: pointer; } .link:hover { color: #fff; background: #0079be; } .link.selectable > span { display: inline-block; } .link.selectable.selecting > span { cursor: text; } 

Javascript

 $('.link.selectable > span').hover( function() { var selectableTimeout = setTimeout( function(elem) { $(elem).parent().addClass('selecting'); }, 500, this ); $(this).data('selectableTimeout', selectableTimeout); }, function() { clearTimeout($(this).data('selectableTimeout')); $(this).parent().removeClass('selecting'); } ); $('.link.selectable').mousedown( function(e) { $(this).data('mouseX', e.pageX); $(this).data('mouseY', e.pageY); } ); $('.link.selectable').mouseup( function(e) { var mouseX = $(this).data('mouseX'); var mouseY = $(this).data('mouseY'); if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) { window.location.href = $(this).attr('data-href'); } } ); 

https://jsfiddle.net/gavin310/6efdyq4h/

Answer 8

Let's say you had a “box” as a link to a call to action, and the main purpose and use for it is to transfer the user to a new page. No less important, however, is the way to “select” part of this text (for example, address, phone number or, in your case, text), something like the following works well.

Caution, the "selectable" text itself is not clickable. But then again, one who intends to choose a text that will not be a problem. For those who are trying to follow this link, they need to click a little outside the selectable text borders.

 <!-- 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