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

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

У меня есть див, на нем обработчик onclick , но на диве есть текст и он иногда выделяется. Как сделать чтобы не выделялся? Желательно через css.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css javascript или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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 и куда писать эти буквы и цифры

Запретить выделение текста

Как запретить выделение текста курсором мыши
Как запретить выделение текста курсором мыши? Нужно, чтобы при наведении курсора на меню курсор.

Запретить выделение текста в Edit
Приветствую! помогите, как запретить выделение текста в Edit ? в интернете нашел пару методов, но.

Запретить выделение ячеек и текста в DataGrid
Как сделать так, чтобы при нажатии на любое место датагрида оно не выделялось? Ни ячейка, ни.

Как запретить выделение текста в textbox?
захожу на форму по таймеру, и в textbox получается выделен текст, как то некрасиво, как запретить.

Лучший ответСообщение было отмечено mik-a-el как решение

Решение

  1. При чем здесь JQuery? Это просто CSS:

При этом <body> надо оформить так:

Сообщение от webarts
Сообщение от >
Сообщение от Skipy
Сообщение от Skipy

Не, лично я так делал просто чтобы придать сайту некий эффект. Думаю, запрещать пользователю копировать текст вообще бессмысленно))) сработает только против какого-нибудь совсем нешарящего юзера))) В HTML ведь он всегда доступен. А в целях защиты от копирования ничего лучше, чем представить текст в виде PNG-картинки не вижу)

Кстати, на счет того скрипта, что выше, я хочу признать, он не такой уж и идеальный — скроллбар перестает работать, правда колесиком все равно норм прокручивается. Так что не буду я использовать этот скрипт.

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

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