user-select

Свойство user-select определяет, может ли пользователь выбрать текст в элементе, для которого это свойство задано.

Добавим к тексту user-select, чтобы он не выделялся мышкой.

        
          
          p {  user-select: none;}
          p {
  user-select: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• none — текст внутри элемента нельзя выделить и, как следствие, скопировать.
• text — текст может быть выделен.
• all — весь текст, включая текст в дочерних элементах, будет выделен автоматически при клике.
• auto — значение вычисляется в зависимости от элемента:
  • для редактируемого элемента (атрибут contenteditable) значение будет contain;
  • для псевдоэлементов ::before и ::after значение будет none;
  • значения user-select: all и user-select: none наследуются от родителя.
  • иначе значение будет text.
• contain — может быть выделен только текст элемента, которому задано свойство.

⚠️ Обратите внимание: значение contain определено в спецификации, но не поддерживается браузерами.

💡 Обычно свойство используется для интерактивных элементов на которые можно нажать, но выделение текста у них при этом нежелательно.