Make Text in Link selezionabile con CSS

Question

Sto lavorando su un sito che raccoglie citazioni famose. Il testo della citazione è un link per fare qualcos'altro [...] Ma voglio anche che l'utente possa selezionare e copiare il testo della citazione.

Ma in quasi tutti i browser l'utente non può facilmente selezionare il testo nei collegamenti.

È possibile sovrascriverlo in CSS e consentire all'utente di selezionare il testo?

Answer 1

No, ma non si dovrebbero avere enormi blocchi di testo in un collegamento: un link dovrebbe idealmente essere solo una o due parole, non un intero paragrafo.

Answer 2

Non è possibile. Tuttavia, puoi rendere un elemento simile a un collegamento ma utilizzare JS per gestire effettivamente la parte "link" di esso.

jQuery:

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

HTML:

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

CSS (per dargli il cursore "mano")

.q { 
    cursor: pointer; 
} 

Demo

vorrei solo mantenere il citazione solo testo (nessun collegamento) e poi aggiungi un link più piccolo alla fine per maggiori informazioni o qualunque cosa possa essere.

Answer 3

Questo non è proprio un lavoro per CSS, in quanto questa è funzionalità, non rendering. Ed è un problema difficile, perché un click su un link dovrebbe significare seguire il link, e rompere questo creerebbe un grosso problema di usabilità.

L'approccio migliore consiste nell'evitare di creare collegamenti tra virgolette e utilizzare collegamenti separatamente. Ad esempio, i crediti sotto una quotazione, o il nome della risorsa citata nei crediti, sarebbe un collegamento naturale. E se vuoi un clic per "fare qualcos'altro", allora forse dovresti usare pulsanti, non collegamenti, associati alle citazioni.

Answer 4

Non posso dirlo senza vedere il tuo sito in azione, ma ho il sospetto che il problema è che il tuo tag link contiene più di una citazione.

Se il collegamento mostra "Essere o non essere - questa è la domanda", selezionarlo dovrebbe essere uguale a qualsiasi altra domanda. Se il link è "Ecco una grande citazione: 'Essere o non essere - questa è la domanda. Clicca qui per fare qualcos'altro!" quindi non saranno in grado di selezionare il testo nel mezzo, che è tutto ciò che vorranno.

Assicurarsi che il testo del collegamento sia solo il testo che si desidera selezionare e inserire qualcos'altro al di fuori dei tag e tutto andrà bene.

Answer 5

In Firefox, è possibile selezionare parti dei collegamenti ipertestuali premendo il tasto Alt e quindi selezionando come di consueto con il mouse. Quindi un'opzione è di implementare qualcosa di simile usando jQuery: se si preme il tasto Alt (o una chiave che si assegna) e il puntatore del mouse si trova sul collegamento, disabilitare il collegamento. Quando viene rilasciata la chiave, abilitare il collegamento. Ovviamente dovresti dire agli utenti come effettuare la selezione.

Answer 6

Ecco un metodo che ho trovato.

Utilizza un <span> anziché un tag <a>, ma si comporta come un normale collegamento con alcuni bonus. Quando si scorre il testo, c'è un timeout di 500 millisecondi che cambierà il cursore sul cursore di selezione del testo. Cliccando e trascinando il testo non si attiva un'azione di clic, tuttavia facendo doppio clic sul testo (per selezionare parole intere) si attiva comunque l'evento click. Questo potrebbe essere migliorato, ma funziona bene e potrebbe essere utilizzato in produzione.

Un'altra possibilità per rendere questo ancora migliore sarebbe quando si esegue il timeout, mostra anche una piccola icona di appunti in alto a destra del pulsante che possono fare clic per copiare il testo negli appunti. Quando si .mouseout() del pulsante si nasconderebbe l'icona di Appunti.

Inoltre, un'altra funzione potrebbe essere quella di cancellare la selezione del testo quando il mouse lascia il pulsante. (Clear Text Selection with JavaScript)

HTML

<span data-href="javascript:alert('This is the click action.');" class="link selectable"> 
    <span>info@mydomain.com</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 7

tag Put di ancoraggio all'interno di un tag di paragrafo e sarà selezionabile e cliccabile, come questo

<p><a href="#">Click Me</a></p> 

semplice e facile.