Выделение текста
Классы select-* задают свойство user-select: можно ли выделить текст
элемента и как. Берите их, чтобы текст кнопок и перетаскиваемых элементов не
выделялся случайно, а код и номера копировались одним щелчком.
Пример
Выделите текст мышью в каждом блоке. Щёлкните по блоку select-all — он
выделится целиком. В третьем блоке выделение запрещено, кроме номера заказа с
select-text.
Классы
| Класс | CSS | Значения |
|---|---|---|
select-none |
user-select: none |
— |
select-auto |
user-select: auto |
— |
select-text |
user-select: text |
— |
select-contain |
user-select: contain |
— |
select-all |
user-select: all |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
| Класс | Выделение |
|---|---|
select-none |
запрещено |
select-text |
разрешено, в том числе внутри блока с select-none |
select-all |
щелчок выделяет всё содержимое элемента |
select-contain |
выделение, начатое внутри, не выходит за элемент |
select-auto |
как задано браузером и родителем |
Команда для копирования:
<code class="select-all">npm install simai-framework</code>
Карточка, по которой щёлкают, но номер в ней копируют:
<div class="select-none cursor-pointer">
Заказ <span class="select-text">4815-1623</span>
</div>
Ограничения
select-noneне защищает текст от копирования: он остаётся в коде страницы. Не запрещайте выделение обычного читаемого текста.select-containподдерживают не все браузеры.- Префиксов ширины экрана и состояния у семейства нет.