Как скрыть текст внутри блока?
Есть блок с текстом. Как скрыть текст внутри этого блока?
6 ответов 6
Есть несколько вариантов реализации скрытия текста:
Просто обернуть текст в блоке в span и скрыть его
Вариант приближённый к скрытию. Во всяком случае текста не видно
Использовать нулевой шрифт. Т.е. специальный шрифт, в котором нет букв. К сожалению, я такого найти не смог
Использовал font-size:0; таким образом скрыл текст
Если нужно скрыть только часть текста (например чтобы при наведении показывать весь блок):
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.9.22.40267
Нажимая «Принять все файлы 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 и куда писать эти буквы и цифры
Спасибо большое, все четко и без воды.
А санкций за такое сокрытие текста от поисковых систем не последует?
Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS
Задача: Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
Пример:
CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».
Решение: Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот код для примера:
Подробнее о коде:
Источник
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Всю голову сломал, как же сделать, чтобы после нажатия на кнопку Развернуть форма не прыгала вниз по экрану. Это происходит лишь тогда когда желтая форма находится в верхней части экрана.
Имеете в виду если раскрывающийся блок находится в самом верху, то при клике на Раскрыть страница прокручивается так что этот желтый блок становится по середине?
Интересно, конечно.
Если придумаете, то пишите 🙂
Как скрыть элементы в HTML?
Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.
В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.
Спрятать по имени класса (class)
HTML пример
CSS пример
Код выше скроет все элементы на странице с
Спрятать по id
HTML пример
CSS пример
Код выше скроет все элементы на странице с
Спрятать по другим атрибутам
В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.
HTML пример
CSS пример
Вы так же можете убрать элемент другими свойствами CSS, например:
Описание CSS свойств из примера выше
opacity: 0 — устанавливает прозрачность до 0, тем самым элемент совсем не будет показан на странице, чтобы снова показать нужно установить 0.1 (10% видимости элемента), 0.2, … 1.
visibility: hidden — схожее свойство с display: none
width: 0;height: 0; — если их поставить к нулю, то у вашего элемента высота и ширина будет равно 0, тем самым он вообще не будет показывать на экране.
jQuery
Элементы на странице так же можно скрыть при помощи jQuery. Вы должны сначала установить библиотеку jQuery, прежде чем начать пользоваться ее функциями.
Обращаться к элементам можно таким же образом, как и в CSS. Проблема CSS в том, что с его помощью можно только прятать элементы.
jQuery позволяет удалять элементы, чтобы они не были видны даже при рассмотрении исходного кода страницы.
Удалить элемент с помощью класса (class)
Скрипт ниже удалить все элементы со страницы с классом sidebar.
HTML пример
jQuery пример
Удалить элемент с помощью id
Скрипт ниже удалить элемент со страницы с id sidebar.
HTML пример
jQuery пример
Удалить элемент по атрибуту
Таким образом можно удалить все что угодно на странице.
JavaScript
JavaScript очень мощный сам по себе, но не многие знаю как им пользоваться, так как для начинающего разработчика, язык является достаточно сложным. Ниже я написал несколько пример того, как можно скрыть элементы используя JavaScript.
Удалить элемент с помощью class
HTML пример
JavaScript пример
Пример выше удалит элемент с id именем sidebar.
Удалить элемент по атрибуту
HTML пример
JavaScript пример
Чтобы удалить все элементы, используйте цикл, как на примере ниже:
Вывод
Ни один способ описанный выше не является наилучшим для удаления элементов на странице так как лучше всего найти исходник проблемы и удалить от туда. Например найти html страницу где находится ненужный элемент страницы и удалить его от туда. Лучше этого ничего нельзя сделать.
Если у вас остались какие-нибудь вопросы, пишите их в комментарии.
Как написать невидимый текст
Желание скрыть часть контента может возникать по разным причинам. Выяснять, для чего скрывают текст, картинки и другие элементы страницы, не станем, лучше узнаем, как написать невидимый текст, спрятать фотографию, баннер, ссылку различными способами. Для реализации большинства методов потребуются минимальные знания в области программирования и HTML-разметки.
Как скрыть текст на сайте
Используем HTML-код
Чтобы при помощи HTML создать скрытый текст, нужно открыть исходный код страницы, найти скрываемое слово или предложение и установить цвет шрифта таким же, как цвет фона страницы. После загрузки страницы в браузере текст сольется с фоном и станет невидимым. Также предложения можно сделать практически невидимыми путем изменения размера шрифта до очень маленького. Еще один вариант: скрыть текст под изображением, которое дополнительно может сливаться с фоном и быть из-за этого невидимым.
Используем DHTML
Динамический HTML-код состоит из обычного HTML, каскадных таблиц стилей и элементов языка сценариев. Он позволяет вносить изменения в содержимое страниц без их перезагрузки. Для реализации задуманного пользователю потребуется создать небольшой код CSS и установить его в теле страницы между тегами body. Каскадные таблицы стилей дают практически безграничные возможности в плане изменения внешнего вида контента. В примере текст скрыт, но при нажатии на кнопку он появляется. Если пользователю требуется только скрыть контент, то часть кода можно удалить.
При помощи стилей можно прятать ссылки, предложения, текстовые блоки, таблицы, изображения, используя свойства скрываемого объекта. Например, свойства opacity, visibility, display, position, clip-path позволяют скрывать объекты разными способами.
Используем JavaScript
Код скрипта можно вписывать как в заголовок, так и в тело страницы между тегами head или body соответственно. Главное, не забыть обозначить начало и конец кода. Для этого пользуются тегами script.
Сначала надо написать функцию, которая будет скрывать контент.
Далее в нужном месте кода страницы следует запросить вывод результата работы скрипта.
При помощи данного скрипта была скрыта большая часть статьи. Ссылка «Подробнее» необходима для отображения спрятанного контента и одновременного скрытия самой ссылки после появления текста, так как в ней отпала необходимость.
Еще один пример. Этот скрипт нужно вставить в тело страницы в нужном месте. После загрузки страницы в браузере пользователь увидит две кнопки: «Скрыть» и «Показать». Нажав на соответствующую, он увидит или скроет alalala. Если вас заинтересовал вопрос, как сделать тег невидимым, то вам следует внимательнее относиться к написанию кода. Правильно написанные и использованные теги не отображаются браузерами, поэтому скрывать их нет необходимости.