Как в html скрыть текст
Перейти к содержимому

Как в html скрыть текст

  • автор:

Как написать невидимый текст

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

Как скрыть текст на сайте

Используем HTML-код

Чтобы при помощи HTML создать скрытый текст, нужно открыть исходный код страницы, найти скрываемое слово или предложение и установить цвет шрифта таким же, как цвет фона страницы. После загрузки страницы в браузере текст сольется с фоном и станет невидимым. Также предложения можно сделать практически невидимыми путем изменения размера шрифта до очень маленького. Еще один вариант: скрыть текст под изображением, которое дополнительно может сливаться с фоном и быть из-за этого невидимым.

Используем DHTML

Динамический HTML-код состоит из обычного HTML, каскадных таблиц стилей и элементов языка сценариев. Он позволяет вносить изменения в содержимое страниц без их перезагрузки. Для реализации задуманного пользователю потребуется создать небольшой код CSS и установить его в теле страницы между тегами body. Каскадные таблицы стилей дают практически безграничные возможности в плане изменения внешнего вида контента. В примере текст скрыт, но при нажатии на кнопку он появляется. Если пользователю требуется только скрыть контент, то часть кода можно удалить.

Скрываем текст на странице в динамическом HTML-коде

Как скрыть текст на странице в DHTML

Как скрыть текст на странице в DHTML

При помощи стилей можно прятать ссылки, предложения, текстовые блоки, таблицы, изображения, используя свойства скрываемого объекта. Например, свойства opacity, visibility, display, position, clip-path позволяют скрывать объекты разными способами.

Методы скрытия объектов в DHTML

Способы скрытия объектов

Способы скрытия объектов

Методы скрытия объектов в DHTML

Способы скрытия объектов

Способы скрытия объектов

Используем JavaScript

Код скрипта можно вписывать как в заголовок, так и в тело страницы между тегами head или body соответственно. Главное, не забыть обозначить начало и конец кода. Для этого пользуются тегами script.

Сначала надо написать функцию, которая будет скрывать контент.

Код функции на JavaScript для скрытия контента

Функция для скрытия контента в JavaScript

Функция для скрытия контента в JavaScript

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

Вывод результата работы JS-скрипта

Вывод результата работы скрипта

Вывод результата работы скрипта

При помощи данного скрипта была скрыта большая часть статьи. Ссылка «Подробнее» необходима для отображения спрятанного контента и одновременного скрытия самой ссылки после появления текста, так как в ней отпала необходимость.

Ссылка ‘Подробнее’ в коде страницы на JavaScript

Ссылка

Ссылка ‘Подробнее’ в JavaScript

Еще один пример. Этот скрипт нужно вставить в тело страницы в нужном месте. После загрузки страницы в браузере пользователь увидит две кнопки: «Скрыть» и «Показать». Нажав на соответствующую, он увидит или скроет alalala. Если вас заинтересовал вопрос, как сделать тег невидимым, то вам следует внимательнее относиться к написанию кода. Правильно написанные и использованные теги не отображаются браузерами, поэтому скрывать их нет необходимости.

Как скрыть строку html

Чтобы скрыть строку HTML, можно использовать CSS свойство display и установить его значение равным none. Вот несколько способов скрыть строку HTML:

Используя инлайн-стили:

 style="display: none;">Эта строка будет скрыта 

Используя класс:

 class="hidden">Эта строка будет скрыта 
.hidden  display: none; > 

Используя идентификатор:

 id="hidden-text">Эта строка будет скрыта 
#hidden-text  display: none; > 

Используя псевдокласс :hidden :

 class="hidden">Эта строка будет скрыта 
.hidden  display: none; > 
p:hidden  color: red; > 

В этом примере строка текста будет скрыта, но ее содержимое все еще будет доступно для программного обращения. Обратите внимание, что скрыть строку HTML с помощью CSS свойства display также может изменить расположение остальных элементов на странице, поэтому вам может понадобиться добавить дополнительные стили для корректной компоновки.

Как скрыть текст внутри блока?

@teran, это не интересно. Вдруг у меня куча текста с прерываниями (между текстом стоят другие элементы: картинки, блоки) и мне что, каждый кусок текста нужно в span оборачивать?

3 фев 2017 в 17:14
font-size: 0; можно так 🙂
3 фев 2017 в 17:18
@L.Vadim, так добавьте этот вариант ответом. Я задал вопрос, что бы вообще все варианты узнать )
3 фев 2017 в 17:21

@УткаУчитсяУму под цвет эт фока это будет visibility:hidden, но не display:none, а вообще тут тогда и color:transparent подойдёт 🙂

3 фев 2017 в 17:34

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

Есть несколько вариантов реализации скрытия текста:

    Просто обернуть текст в блоке в span и скрыть его

.el > span
Текст
Текст
Текст
Текст
Текст

Отслеживать
ответ дан 10 июл 2017 в 17:30
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков

Использовал font-size:0; таким образом скрыл текст

.list < >.list-item < /* text-display: none; */ font-size:0; width:200px; height:20px; background:green; >div

Отслеживать
ответ дан 3 фев 2017 в 17:28
3,416 1 1 золотой знак 10 10 серебряных знаков 18 18 бронзовых знаков

Хм, в Firefox он внезапно не скрылся, слева от зелёного прямоугольника появились пиксели являющиеся текстом, по одному на строку

3 фев 2017 в 17:33
Походу эти пиксели — кружочки от
3 фев 2017 в 17:40
да это кружочки li
3 фев 2017 в 17:42
на всякий случай: list-style: none; если надо скрыть кружочки (а надо ли? они тоже не текст =))
3 фев 2017 в 17:44
@УткаУчитсяУму вроде в вопросе про кружочки не скзано
3 фев 2017 в 17:47

если важно, чтоб текст был но его не было видно — можно использовать:

color: rgba(0, 0, 0, 0); 

Отслеживать
ответ дан 6 июл 2020 в 8:46
Semen Prokhoda Semen Prokhoda
21 1 1 бронзовый знак
Можно ещё указать color: transparent
6 июл 2020 в 10:45

.list-item

Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
ответ дан 3 фев 2017 в 20:01
Utmost Creator Utmost Creator
152 6 6 бронзовых знаков
Ну этот же вариант скроет всё, а не только текст
3 фев 2017 в 20:03
Нет такого значения. Поменяй none на hidden .
10 июл 2017 в 19:32

Если нужно скрыть только часть текста (например чтобы при наведении показывать весь блок):

.block < width:45px; white-space:nowrap; overflow:hidden >.block:hover
Видно Невидно

Отслеживать
ответ дан 29 сен 2019 в 17:25

.list-item

Отслеживать
22.4k 11 11 золотых знаков 56 56 серебряных знаков 121 121 бронзовый знак
ответ дан 4 фев 2017 в 19:56
Utmost Creator Utmost Creator
152 6 6 бронзовых знаков

Роман, у вас уже ест ответ, дополните его, а не создавайте новый. И — оформляйте код как код, вы же уже делали это в других ответах.

4 фев 2017 в 21:04

@AK, во-первых, это разные ответы и не надо ничего дополнять. Во-вторых, я знаю только один браузер, гда описанное в этом ответе работает: Опера 12. По стандарту это должно игнорироваться.

HTML — показать/скрыть текст

Иногда возникает необходимость вставки кода, позволяющего показать или скрыть слой с картинкой или текстом по клику на кнопку. И хотя в Сети много вариантов подобного решения — бОльшая часть из них использует в своем механизме Java или jquery.

А ведь проблему можно решить и с помощью штатных средств HTML ��

.del:not(:checked) + label + *

/* тут редактируем вид кнопки */
.del:not(:checked) + label,
.del:checked + label 
display: inline-block;
padding: 2px 10px;
border-radius: 2px;
color: #fff;
background: #4e6473;
cursor: pointer;
.del:checked + label 
background: #e36443;

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

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