Como desativar a cópia de texto apenas com CSS

Como desativar a cópia de texto apenas com CSS

Muitas vezes queremos bloquear que usuários copiem algum texto específico do nosso site. Existem muitas alternativas que desabilita que o usuário consiga copiar ou dar Ctrl+C em um texto selecionado, sendo que a grande maioria utiliza javascript.

Entretanto uma alternativa muito simples é bloquear a seleção do texto com CSS:

.nao-pode-selecionar {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
	user-select: none;
}
<p class="nao-pode-selecionar">
	Mussum Ipsum, cacilds vidis litro abertis. Delegadis gente finis, bibendum egestas augue arcu ut est.
</p>

Basta passar none na propriedade user-select. 😋

Como fazer com que o usuário selecione todo o texto com apenas um clique?

Caso o intuito seja facilitar que o usuário copie um determinado texto, é possível fazer isso usando apenas CSS também, é só trocar o valor da propriedade user-select de none para all:

.seleciona-tudo {
    -moz-user-select: all;
    -webkit-user-select: all;
    -ms-user-select: all;
	user-select: all;
    cursor: pointer;
}
<p class="seleciona-tudo">
    Leite de capivaris, leite de mula manquis sem cabeça. Quem num gosta di mim que vai caçá sua turmis!
</p>

Coloquei também a propriedade cursor com valor pointer pra ficar visível pro usuário que basta dar apenas um clique. 😉

Referências