Как сделать чтобы текст не выделялся css
Перейти к содержимому

Как сделать чтобы текст не выделялся css

  • автор:

user — select

Свойство CSS, которое разрешает или запрещает возможность выбора текста.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

 p  user-select: none;> p  user-select: none; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

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

    Выделение текста

    Утилиты для управления возможностью выделения пользователем текста в элементе.

    Используйте select-none , чтобы предотвратить выделение текста в элементе и его дочерних элементах.

    Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

    Быстрая коричневая лиса прыгает через ленивую собаку.

    div class="select-none . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

    Используйте select-text , чтобы разрешить выделение текста в элементе и его дочерних элементах.

    Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

    Быстрая коричневая лиса прыгает через ленивую собаку.

    div class="select-text . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

    Используйте select-all , чтобы автоматически выделять весь текст в элементе, когда пользователь щелкает мышью.

    Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

    Быстрая коричневая лиса прыгает через ленивую собаку.

    div class="select-all . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

    Используйте select-auto , чтобы использовать поведение браузера по умолчанию для выбора текста. Полезно для отмены других классов, таких как select-none , в разных контрольных точках.

    Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

    Быстрая коричневая лиса прыгает через ленивую собаку.

    div class="select-auto . "> Быстрая коричневая лиса прыгает через ленивую собаку. div>

    Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : select-all , чтобы применять утилиту select-all только при hover .

    div class="hover:select-all"> div> 

    Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

    Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: select-all , чтобы применить утилиту select-all только на экранах среднего размера и выше.

    div class="md:select-all"> div> 

    Copyright © 2023 Tailwind Labs Inc.

    Как запретить браузеру выделять текст

    Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.

    Что же мы можем сделать? До сих пор думал немногое. Но прежде чем перейти к рассмотрению нового (лично для меня) методу, рассмотрим какие возможности борьбы с выделением текста предлагают нам браузеры.

    Internet Explorer

    1. Для элементов устанавливаем атрибут unselectable со значением on. Но тут есть один нюанс: текст блока с таким атрибутом нельзя выделить (то есть нельзя начать выделение с данного элемента, и клик по такому элементу не будет снимать выделение с текста, если такой выделен), но если он содержит другие элементы (к примеру «безобидные» SPAN, B и т.д.) то текст в них выделить можно. К тому же если выделение текста начато с блока без такого атрибута, то текст внутри блока с атрибутом unselectable так же будет выделен. В такой ситуации решение одно — ставить всем (!) элементам данный атрибут, что неудобно и не практично.
    2. Перехват события selectstart. Другими словами добавив элементу onselectstart=«return false» (к примеру к BODY) запрещает выделение текста внутри него. Опять же нюанс: если начать выделять текст за пределами такого блока, то текст внутри него выделяется без проблем.

    FireFox (браузеры на движке gecko), Safari (браузеры на движке KHTML)

    Данные браузеры имеют более совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS свойство user-select со значение none, которое включили в CSS3. Но до того как это свойство утверждено, браузеры демократично сделали это собственной фишкой движка назвав свойство -moz-user-select и -khtml-user-select соответственно. Получается, чтобы запретить выделять текст внутри блока, достаточно написать:

    -moz-user-select: none; -khtml-user-select: none; user-select: none;

    И дело в шляпе.

    Другие браузеры

    А вот что касается других браузеров, то у них таких механизмов замечено не было. Вообще никаких. Конечно же Opera впереди планеты всей, для нее запрет выделения текста равносильно самому злостному преступлению. Но есть, есть один могильничек 🙂
    Изучая вчера файл Оперы с хаками для сайтов, наткнулся на интересные строки:

    document.addEventListener('mousemove',function(e)< if( e.target.getAttribute('unselectable')=='on' ) e.target.ownerDocument.defaultView.getSelection().removeAllRanges(); >,false);

    Вспомним про атрибут unselectable у Internet Explorer’а, и становится ясным что в даном случае мы боремся с выделением текста. Развив идею, получилось некоторое кроссбраузерное решение:

    function preventSelection(element) < var preventSelection = false; function addHandler(element, event, handler)< if (element.attachEvent) element.attachEvent('on' + event, handler); else if (element.addEventListener) element.addEventListener(event, handler, false); >function removeSelection() < if (window.getSelection) < window.getSelection().removeAllRanges(); >else if (document.selection && document.selection.clear) document.selection.clear(); > function killCtrlA(event) < var event = event || window.event; var sender = event.target || event.srcElement; if (sender.tagName.match(/INPUT|TEXTAREA/i)) return; var key = event.keyCode || event.which; if (event.ctrlKey && key == 'A'.charCodeAt(0)) // 'A'.charCodeAt(0) можно заменить на 65 < removeSelection(); if (event.preventDefault) event.preventDefault(); else event.returnValue = false; >> // не даем выделять текст мышкой addHandler(element, 'mousemove', function()< if(preventSelection) removeSelection(); >); addHandler(element, 'mousedown', function(event)< var event = event || window.event; var sender = event.target || event.srcElement; preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i); >); // борем dblclick // если вешать функцию не на событие dblclick, можно избежать // временное выделение текста в некоторых браузерах addHandler(element, 'mouseup', function()< if (preventSelection) removeSelection(); preventSelection = false; >); // борем ctrl+A // скорей всего это и не надо, к тому же есть подозрение // что в случае все же такой необходимости функцию нужно // вешать один раз и на document, а не на элемент addHandler(element, 'keydown', killCtrlA); addHandler(element, 'keyup', killCtrlA); >

    Вызвав данную функцию, например:

    preventSelection(document);

    1. Opera не дает обрабатывать событие dblclick, так что в этом браузере все равно возможно выделить текст двойным кликом.
    2. Ctrl+A:
      1. В Opera длительное (2-3 секунды) удержание данной комбинации вызывает выделение текста до ее отпускания. Причем если первым отжать клавишу А а потом Ctrl, то выделение пропадает. Иначе остается.
      2. Safari не обрабатывает keydown для клавиш при зажатом Ctrl. Потому выделение текста пропадает только после отпускания клавиш. Причем для этого браузера характерно поведение Opera, в плане порядка отпускания клавиш (если первым отжать Ctrl, то выделение останется).
      1. Safari & FireFox выделяют слово, и сразу снимают выделение. То есть присутствует эффект кратковременного выделения текста.
      2. Opera не дает запретить поведение по умолчанию. Она выделяет слово и вызывает контекстное меню.

      Некорректное выделение текста

      Author24 — интернет-сервис помощи студентам

      Привет специалистам!
      Было такое задание: на всём сайте заблокировать выделение текста мышкой кроме текста внутри полей ввода, при необходимости отдельному блоку можно разрешить выделение, добавив ему класс .selection и тогда внутри него можно выделять текст.
      Вот рабочий пример https://jsfiddle.net/PhantomSoft/07rdtomw/25/
      Помогите понять, почему при попытке выделить текст в разрешённом (жёлтом) блоке он выделяется весь сразу и снять выделение нельзя?
      Как посоветуете исправить css?
      Спасибо.

      Лучшие ответы ( 1 )
      94731 / 64177 / 26122
      Регистрация: 12.04.2006
      Сообщений: 116,782
      Ответы с готовыми решениями:

      Некорректное меню (переносится часть текста)
      Привет. Помогите решить проблемку менюшкой, вроде как-бы мелочь, но уже не знаю, что делать.

      Некорректное отображение русского текста на странице
      Доброго времени суток. При попытке написать отображаемый текст по русски, вместо текста на сайте.

      Выделение текста
      Всем привет. Задаю в CSS цвет выделения текста #ef6f53, в мозиле отображается корректно, а в сафари.

      Запретить выделение текста
      подскажите как запретить выделение текста в блоке div

      dev — investigator

      Эксперт JSЭксперт HTML/CSS

      2151 / 1496 / 651
      Регистрация: 16.04.2016
      Сообщений: 3,696

      Лучший ответ

      Сообщение было отмечено PhantomSoft как решение

      Решение

      PhantomSoft,

      ЦитатаСообщение от PhantomSoft Посмотреть сообщение

      текст в разрешённом (жёлтом) блоке он выделяется весь сразу и снять выделение нельзя

      Вы так указали в правиле user-select для .selection
      Изучите — https://developer.mozilla.org/. ser-select
      ну и лишнее первое правило для *

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
      * { -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* prevent tap highlight color / shadow */ font-family: Tahoma, "Helvetica Neue" , Helvetica, Arial, sans-serif; font-size: 12px; } *:not([type=text]):not([type=password]):not(textarea) { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selection, .selection * { -webkit-touch-callout: text!important; -webkit-user-select: text!important; -khtml-user-select: text!important; -moz-user-select: text!important; -ms-user-select: text!important; user-select: text!important; } html, body {overflow: auto;} body { margin: 0px!important; padding: 0px!important; line-height: 20px; color: #000; background-color: #fff; cursor: default; }

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *