Как скрыть текст внутри блока?
Есть блок с текстом. Как скрыть текст внутри этого блока?
Есть несколько вариантов реализации скрытия текста:
Просто обернуть текст в блоке в span и скрыть его
Установить элементу font-size: 0 . Но это способ работает не во всех старых браузерах
Установить text-indent: -9999px (или -999em); или text-indent: -999em;
Вариант с использованием того же text-indent , но только с определённым сочетанием стилей: text-indent: 100%; white-space: nowrap; overflow: hidden;
Вариант приближённый к скрытию. Во всяком случае текста не видно
Использовать нулевой шрифт. Т.е. специальный шрифт, в котором нет букв. К сожалению, я такого найти не смог
Использовал font-size:0; таким образом скрыл текст
если важно, чтоб текст был но его не было видно — можно использовать:
Если нужно скрыть только часть текста (например чтобы при наведении показывать весь блок):
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
4 способа как на сайте скрыть текст в сss или сделать текст невидимым в html
Допустим, что у нас есть некий абзац на сайте, который включает в себя номер телефона или любой другой текст, который мы хотим скрыть. Например:
Данный абзац лежит на белом фоне (background: #fff;), который записан в таблицах CSS сайта, и нам нужно сделать так, чтобы текст сам остался, а номер телефона сделать невидимым, т.е. скрыть часть текста на сайте без ущерба дизайна. Как это сделать, я расскажу в этой в статье.
Возможно, у вас возник вопрос, а зачем это нужно? Можно ведь просто закрасить текст белым цветом и его будет не видно?
Да, но такой метод позволит сделать текст невидимым только на первый взгляд. Ведь выделив этот белый фон, текст сразу проявится. Я же предлагаю поступить иначе, и расскажу вам, как скрыть текст в HTML посредством различных свойств CSS. А если вы хотите узнать больше про HTML/CSS, то посмотрите, какие сейчас есть курсы по верстке сайтов (рекомендую эту ссылку https://kursy-online.ru/luchshie-kursy-po-verstke-sajtov/ )
Способ 1. Как сделать текст невидимым в html на вашем сайте?
Пожалуй, это самый простой способ и безопасный для поисковиков, как мне кажется. Итак, нужно просто этот текст, а точнее наш номер телефона, закинуть в слой. Например, подложить его под фон. Делается это так:
В результате получаем такой вот текст с пустым пробелом внутри.
Мы видим, что номер телефона скрылся за белым фоном сайта, и между словами образовался пробел. Все потому, что стоит «position: relative;»
Чтобы не было этой пустоты между словами, можно прописать «position: absolute;» — получиться вот такой код:
Результат будет таким уже:
Способ 2. Как сделать невидимый текст на сайте без использования слоев?
В таком случае можно использовать смещение текста за пределы видимой области. Делается это так:
В результате мы получим с виду такой же текст с пустым пробелом внутри.
Аналогично, как и в предыдущем способе можем поменять позиционирование блока на «position: absolute;» — получиться вот так:
И получим наш конечный вариант:
Способ 3. Как скрыть текст на сайте посредством CSS?
Данный способ подразумевает скрывание всего блока. Многие программисты считают, что такую технику не очень любят поисковые системы. Но я должна сказать, что в современных сайтах «display: none;» используется повсеместно. Делаем мы это так:
Результат будет таким:
Получается довольно удобно, поскольку нам не нужно прописывать позиционирование, номер телефона уже сам скрылся.
Способ 4. Еще один альтернативный вариант, как сделать текст невидимым в CSS
Данный способ подобен предыдущему, но здесь уже используется атрибут «visibility: hidden;» — т.е. видимость с установленным свойством как скрытое. Вот пример:
Результат будет такой:
Правда в данном способе уже нужно будет прописать позиционирование, чтобы получилось вот так:
Результат будет такой:
На самом деле, существует еще очень много способов, но эти 4 на мой взгляд самые простые. Теперь вы знаете, как можно скрыть ненужный текст на сайте или сделать его невидимым для читателя. И легко можете использовать такие манипуляции не только на сайтах, но и даже на некоторых форумах. Например, чтобы спрятать ссылку.
ВАМ БУДЕТ ИНТЕРЕСНО ПОЧИТАТЬ:
Поделиться:
6 комментариев к “4 способа как на сайте скрыть текст в сss или сделать текст невидимым в html”
Спасибо, все четко и понятно
А мне как сделать невидимый текст на сайте если я ничего не понимаю вэтом html и куда писать эти буквы и цифры
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
HTML-разметка:
Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden .
Результат будет не очень информативный:
Многоточие
Свойство text-overflow: ellipsis добавляет многоточие к скрываемому тексту и работает только в паре с white-space: nowrap (отменяет переносы строк). Но можно сделать такой приём для нескольких строк текста с помощью свойств display: -webkit-box и -webkit-line-clamp: 4 .
Результат:
Градиент по тексту
В конец блока с текстом можно наложить абсолютный элемент с градиентом от прозрачного до белого, так получится эффект «затухания».
Результат:
Второй вариант с затуханием сверху вниз:
Результат:
Если используется фоновое изображение, то подойдёт вариант с использованием background-clip: text – наложение изображения или градиента на текст.
Показать/скрыть текст. Примеры на JS, CSS
Давайте рассмотрим разные примеры того, как можно показать/скрыть текст по нажатию на кнопку. Обычно такая функция называется спойлер или аккордеон. Это когда весь текст или половина его скрыта от просмотра, и только при нажатии на кнопку, или определённый элемент, открывается весь текст.
Разнообразие реализации такой фишки, как показать/скрыть текст может быть огромное количество. Есть разный подход к технической части: на чистой JavaScript, jQuery, чистый CSS, HTML. Для WordPress можно найти специальные плагины или сделать раскрывающийся текст без плагина.
Показать скрыть текст JS
Первые примеры будут с использованием JS/jQuery. Всё представленное ниже можно «прикрутить» к любому сайту на любой платформе. Внешний вид, то есть дизайн, легко редактируется с помощью CSS.