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

user-select

В SIMAI Framework с помощью модифкаторов можно управлять возможностью выделения пользователем текста в элементе.

Классы

Класс Значение
select-none user-select: none;
select-text user-select: text;
select-all user-select: all;
select-auto user-select: auto;

Описание

Адаптивный модификатор. Задает возможность выделения пользователем текста в элементе.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр.

none

С помощью модификатора select-none - можно предотвратить выделение текста в элементе и его дочерних элементах..

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

text

С помощью модификатора select-text - можно разрешить выделение текста в элементе и его дочерних элементах..

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

all

С помощью модификатора select-all - можно автоматически выделять весь текст в элементе, когда пользователь щелкает мышью..

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

auto

С помощью модификатора select-auto - можно установить поведеление браузера по умолчанию для выделения текста..

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

Изменить статью