как сделать текст невидимым html

4 способа как на сайте скрыть текст в сss или сделать текст невидимым в html


Допустим, что у нас есть некий абзац на сайте, который включает в себя номер телефона или любой другой текст, который мы хотим скрыть. Например:

Hello 80974658562 Hello

Данный абзац лежит на белом фоне (background: #fff;), который записан в таблицах CSS сайта, и нам нужно сделать так, чтобы текст сам остался, а номер телефона сделать невидимым, т.е. скрыть часть текста на сайте без ущерба дизайна. Как это сделать, я расскажу в этой в статье.

Возможно, у вас возник вопрос, а зачем это нужно? Можно ведь просто закрасить текст белым цветом и его будет не видно?

Да, но такой метод позволит сделать текст невидимым только на первый взгляд. Ведь выделив этот белый фон, текст сразу проявится. Я же предлагаю поступить иначе, и расскажу вам, как скрыть текст в HTML посредством различных свойств CSS. А если вы хотите узнать больше про HTML/CSS, то посмотрите, какие сейчас есть курсы по верстке сайтов (рекомендую эту ссылку https://kurshub.ru/luchshie-kursy-po-verstke-sajtov/ )

 

Способ 1. Как сделать текст невидимым в html на вашем сайте?

Пожалуй, это самый простой способ и безопасный для поисковиков, как мне кажется. Итак, нужно просто этот текст, а точнее наш номер телефона, закинуть в слой. Например, подложить его под фон. Делается это так:

В результате получаем такой вот текст с пустым пробелом внутри.

Hello 80974658562 Hello

Мы видим, что номер телефона скрылся за белым фоном сайта, и между словами образовался пробел. Все потому, что стоит «position: relative;»

Чтобы не было этой пустоты между словами, можно прописать «position: absolute;» — получиться вот такой код:

 

Результат будет таким уже:

Hello 80974658562 Hello

 

Способ 2. Как сделать невидимый текст на сайте без использования слоев?

В таком случае можно использовать смещение текста за пределы видимой области. Делается это так:

 

В результате мы получим с виду такой же текст с пустым пробелом внутри.

Hello 80974658562 Hello

Аналогично, как и в предыдущем способе можем поменять позиционирование блока на «position: absolute;» — получиться вот так:

 

И получим наш конечный вариант:

Hello 80974658562 Hello

 

Способ 3. Как скрыть текст на сайте посредством CSS?

Данный способ подразумевает скрывание всего блока. Многие программисты считают, что такую технику не очень любят поисковые системы. Но я должна сказать, что в современных сайтах «display: none;» используется повсеместно. Делаем мы это так:

 

Результат будет таким:

Hello 80974658562 Hello

Получается довольно удобно, поскольку нам не нужно прописывать позиционирование, номер телефона уже сам скрылся.

 

Способ 4. Еще один альтернативный вариант, как сделать текст невидимым в CSS

Данный способ подобен предыдущему, но здесь уже используется атрибут «visibility: hidden;» — т.е. видимость с установленным свойством как скрытое. Вот пример:

 

Результат будет такой:

Hello 80974658562 Hello

Правда в данном способе уже нужно будет прописать позиционирование, чтобы получилось вот так:

 

Результат будет такой:

Hello 80974658562 Hello

На самом деле, существует еще очень много способов, но эти 4 на мой взгляд самые простые. Теперь вы знаете, как можно скрыть ненужный текст на сайте или сделать его невидимым для читателя. И легко можете использовать такие манипуляции не только на сайтах, но и даже на некоторых форумах. Например, чтобы спрятать ссылку.

Поделиться:


6 комментариев к “4 способа как на сайте скрыть текст в сss или сделать текст невидимым в html”

  1. А мне как сделать невидимый текст на сайте если я ничего не понимаю вэтом html и куда писать эти буквы и цифры

    Ответить
    • Виталина, «буквы и цифры» — это код. Все файлы с кодом сайта лежат у вас на хостинге в папке с адресом сайта. Однако для работы с ними вам нужно изучить хотя бы основы html и css, поэтому я бы рекомендовала вам обратиться лучше к вашему программисту, ну или ко мне. Я помогу вам.
      Но, если вы желаете попробовать сделать это самостоятельно, то вот что нужно:
      1) Если у вас сайт простой и сделан на html, то вам нужно найти страницу на хостинге с расширением .html, где находится ваш текст, который вы хотите скрыть. Например, главная страница будет index.html. Там в нужном вам месте вставьте любой из 4-х вариантов кода из данной статьи. А вместо номера телефона в этом коде, который у меня подсвечивается красненьким, вставьте ваш текст, который вы хотите спрятать.
      2) Если у вас сайт на CMS, например, на WordPress, тогда вам на хостинг заходить не надо, просто зайдите в административную панель вашего сайта и перейдите на статью, нажмите редактировать запись. Далее перейдите в панель редактора HTML, это может быть кнопка «html», «Код», «Текст». Ну, а далее поступайте как я описывала в 1) пункте.

      Ответить

Оставьте комментарий