CODEWITHSUNDEEP
htmlcsshyperlinkhtml-select
Lukas
Lukas

Reputation: 151

Make Text in Link selectable with CSS

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?

Upvotes: 15

Views: 14726

Answers (7)

Michel Joanisse
Michel Joanisse

Reputation: 460

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

Upvotes: 1

Tilak Bhandari
Tilak Bhandari

Reputation: 176

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;

}

Upvotes: 9

Forte L.
Forte L.

Reputation: 2812

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.

Upvotes: 14

sgress454
sgress454

Reputation: 24948

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.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 2

sachleen
sachleen

Reputation: 31131

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.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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.

Upvotes: -1

Related Questions