Интерактивность
Утилиты для управления возможностью выбора текста пользователем в элементе.
| Class | Styles |
|---|---|
select-none | user-select: none; |
select-text | user-select: text; |
select-all | user-select: all; |
select-auto | user-select: auto; |
Используйте утилиту select-none для предотвращения выбора текста в элементе и его дочерних элементах:
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
<div class="select-none ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку.</div>Используйте утилиту select-text для разрешения выбора текста в элементе и его дочерних элементах:
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
<div class="select-text ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку.</div>Используйте утилиту select-all для автоматического выбора всего текста в элементе при клике пользователя:
Попробуйте кликнуть по тексту, чтобы увидеть ожидаемое поведение
<div class="select-all ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку.</div>Используйте утилиту select-auto для использования стандартного поведения браузера для выбора текста:
Попробуйте выделить текст, чтобы увидеть ожидаемое поведение
<div class="select-auto ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку.</div>Префикс an user-select утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="select-none md:select-all ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.