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?
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;
}
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: