как сделать так чтобы текст нельзя было выделить html
Управление выделением элементов на сайте при помощи CSS спецификации user-select
При верстке многих элементов часто появляется необходимость снять возможность их выделения. Иначе красиво оформленная кнопка изменяется визуально при случайном выделении.
Управлять выделением можно при помощи CSS спецификации user-select.
Управление выделением текста на странице при помощи user-select
Разберем несколько вариантов выделения. В первом варианте нам нужно сделать так, чтобы текст нельзя было выделить.
Для этого создадим абзац с текстом и добавим в него спецификацию user-select со значением none.
Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры
Второй вариант. Сделаем так, чтобы текст можно было выделить один нажатие и полностью.
Этот текст выделяется одним нажатием вместе с дочерними элементами.
Допустим у нас есть страница с текстом и изображениями. Нужно сделать так, чтобы мы могли выделить только текст без изображений.
В этом тексте находится изображение 
и при выделении текста изображение не выделяется.
Управление выделением других элементов
Если у вас есть кнопка, например, в
Получается, что для любого элемента на HTML странице прописав спецификацию user-select мы можем управлять выделением.
Запрет вызова контектсного меню
Далеко не секрет, что если вы запретили выделение текста, то можно вызвать контектсное меню и через него обойти этот запрет. Поэтому идеальным решением будет запрет вызова контектсного меню. Это можно сделать с помоью jаvascript события «oncontextmenu=»return false;».
Выше также прописаны параметры user-select для браузера Mozilla и Chrome.
Таким образом, испозльуя CSS спецификацию user-select и событие jаvascript можно защитить свой контент от копирования. Но помните, что это решение не является идеальным и несложно обходится через панель разработчика. В крайнем случае можно просто сделать скриншот вашего текста и потом распознать его.
4 способа как на сайте скрыть текст в сss или сделать текст невидимым в html
Допустим, что у нас есть некий абзац на сайте, который включает в себя номер телефона или любой другой текст, который мы хотим скрыть. Например:
Данный абзац лежит на белом фоне (background: #fff;), который записан в таблицах CSS сайта, и нам нужно сделать так, чтобы текст сам остался, а номер телефона сделать невидимым, т.е. скрыть часть текста на сайте без ущерба дизайна. Как это сделать, я расскажу в этой в статье.
Возможно, у вас возник вопрос, а зачем это нужно? Можно ведь просто закрасить текст белым цветом и его будет не видно?
Да, но такой метод позволит сделать текст невидимым только на первый взгляд. Ведь выделив этот белый фон, текст сразу проявится. Я же предлагаю поступить иначе, и расскажу вам, как скрыть текст в HTML посредством различных свойств CSS.
Способ 1. Как сделать текст невидимым в html на вашем сайте?
Пожалуй, это самый простой способ и безопасный для поисковиков, как мне кажется. Итак, нужно просто этот текст, а точнее наш номер телефона, закинуть в слой. Например, подложить его под фон. Делается это так:
В результате получаем такой вот текст с пустым пробелом внутри.
Мы видим, что номер телефона скрылся за белым фоном сайта, и между словами образовался пробел. Все потому, что стоит «position: relative;»
Чтобы не было этой пустоты между словами, можно прописать «position: absolute;» — получиться вот такой код:
Результат будет таким уже:
Способ 2. Как сделать невидимый текст на сайте без использования слоев?
В таком случае можно использовать смещение текста за пределы видимой области. Делается это так:
В результате мы получим с виду такой же текст с пустым пробелом внутри.
Аналогично, как и в предыдущем способе можем поменять позиционирование блока на «position: absolute;» — получиться вот так:
И получим наш конечный вариант:
Способ 3. Как скрыть текст на сайте посредством CSS?
Данный способ подразумевает скрывание всего блока. Многие программисты считают, что такую технику не очень любят поисковые системы. Но я должна сказать, что в современных сайтах «display: none;» используется повсеместно. Делаем мы это так:
Результат будет таким:
Получается довольно удобно, поскольку нам не нужно прописывать позиционирование, номер телефона уже сам скрылся.
Способ 4. Еще один альтернативный вариант, как сделать текст невидимым в CSS
Данный способ подобен предыдущему, но здесь уже используется атрибут «visibility: hidden;» — т.е. видимость с установленным свойством как скрытое. Вот пример:
Результат будет такой:
Правда в данном способе уже нужно будет прописать позиционирование, чтобы получилось вот так:
Результат будет такой:
На самом деле, существует еще очень много способов, но эти 4 на мой взгляд самые простые. Теперь вы знаете, как можно скрыть ненужный текст на сайте или сделать его невидимым для читателя. И легко можете использовать такие манипуляции не только на сайтах, но и даже на некоторых форумах. Например, чтобы спрятать ссылку.
ВАМ БУДЕТ ИНТЕРЕСНО ПОЧИТАТЬ:
Поделиться:
6 комментариев к “4 способа как на сайте скрыть текст в сss или сделать текст невидимым в html”
Спасибо, все четко и понятно
А мне как сделать невидимый текст на сайте если я ничего не понимаю вэтом html и куда писать эти буквы и цифры
Спасибо большое, все четко и без воды.
А санкций за такое сокрытие текста от поисковых систем не последует?
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Как запретить копирование с сайта с помощью CSS
Ранее были рассмотрены два варианта того, как запретить копирование контекста с сайта: с помощью JavaScript (легко обходится отключением JS в браузере) и с помощью прозрачного блока CSS на весь экран, который перекрывает доступ до элементов страницы (легко обходится, удалением этого элемента со страницы с помощью инструментов разработчика браузера). В этой статье расскажу про ещё один способ того, как усложнить жизнь тем, кто ворует чужой контент с помощью CSS свойства user-select и на этом пожалуй остановлюсь. Нет идеальной защиты. На крайней случай, можно всегда нанять секретаршу, которая всё перепечатает (если конечно нет нормального сисадмина, разбирающегося в том, как работают сайты, в штате).
CSS свойство user-select что оно умеет и для чего предназначено
CSS свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Нормальным применением этого свойства будет запретить выделение текста на тех элементах страницы, которые служат указателями, например, в панели вкладок на странице с аккордеоном. Этого же можно добиться, заменив текст картинками, но зачем усложнять и утяжелять страницу? CSS свойство user-select не влияет на поведение поисковых роботов, поэтому его также применяют на сайтах для обеспечения защиты текста от копирования.
Сделать это можно так:
Как обойти блокировку копирования CSS свойством user-select
Как разрешить копировать лишь часть контента
Для того, чтобы можно было хоть что-то скопировать, можно задать дополнительный CSS-класс, в котором отключить запрет на выделение:
Тогда, можно управлять тем, что поддаётся выделению (и копированию) и тем, что стандартными средствами выделить в браузере не получится (даже при отключенном в браузере JavaScript). Например,
Выводы
Таким образом с помощью CSS свойства user-select можно дополнительно усложнить жизнь тем, кто ворует контент и защитить сайт от копирования текста, но решения о том, как развидеть то, что уже показано на мониторе пользователя просто не существует. Если показали, — значит дали шанс использовать. А уж как поведёт себя пользователь с полученной информацией, предсказать невозможно.
Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа. Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.
Выделить всё
Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).
Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!
Выделить всё… Затем выделить часть
Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.
Теперь немного CSS.
Предотвращение выделения текста
CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.
Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения — выглядеть немного странно и дико.
Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа — нет.
Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details ) или фальшивыми кнопками — например,
Выборочное выделение текста
Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.
В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.
Но это работает не во всех браузерах. Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.
Стилизация выделения
Вот пример стилизации выделенного текста в HTML-элементе
Чтобы увидеть результат, выделяйте текст в примере ниже.
Немного особенностей
. Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение contain не поддерживают все современные браузеры.
Тем не менее, все редактируемые элементы (такие как
Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.
Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.