как скрыть текст в коде html
Скрыть текст в HTML?
Я скоро завершу веб-сайт для моего университета (на самом деле, он в основном закончен, кроме некоторых мягких настроек), и я хотел бы добавить скрытую благодарность некоторым блогерам, которые помогли, и сообществу переполнения стека, которое было огромной помощью. Прямо сейчас, у меня есть текстовый раздел, который скрыт таким образом:
но я чувствую, что есть лучший путь. Есть?
10 ответов
вы проверили http://humanstxt.org/. Он построен именно для вашей цели:)
это сохранит свое пространство, но ничего не покажет;
это полностью скроет объект, плюс его (зарезервированное) пространство;
вы можете использовать свойство CSS, чтобы скрыть style=»display:none;»
вот два способа достичь этого
вы можете отобразить none или иметь непрозрачность none. Но если вы хотите, чтобы непрозрачность была совместима с кросс-браузером, вам нужно добавить это в свой css
Вы сказали, что не можете использовать HTML-комментарии, потому что CMS отфильтровывает их. Поэтому я предполагаю, что вы действительно хотите скрыть этот контент, и вам не нужно его отображать.
в этом случае вы не должны использовать CSS (только), так как вы будете играть только на уровне презентации, не влияя на уровень контента. Ваш контент также должен быть скрыт для пользовательских агентов, игнорирующих CSS (люди, использующие текстовые браузеры,читатели ленты, читатели экрана; боты и т. д.).
в HTML5 есть мировой hidden атрибут:
при указании на элементе он указывает, что элемент еще не имеет или больше не имеет прямого отношения к текущему состоянию страницы или что он используется для объявления контента, который будет повторно использоваться другими частями страницы, а не напрямую доступен пользователю. Агенты пользователей не должны отображать элементы, имеющие указано.
пример (с использованием small элемент здесь, потому что это «атрибуция»):
как запасной вариант (для пользовательских агентов, которые не знают hidden атрибут), вы можете указать в своем CSS:
общим элементом для обычного текста может быть script элемент используется как «блок данных»:
кроме того, вы также можете использовать data-* атрибуты по существующим элементам (соотв. на новый div элементы, если вы хотите сгруппировать некоторые элементы для атрибуции):
Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS
Задача: Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
Пример:
CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».
Решение: Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот код для примера:
Подробнее о коде:
Источник
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Всю голову сломал, как же сделать, чтобы после нажатия на кнопку Развернуть форма не прыгала вниз по экрану. Это происходит лишь тогда когда желтая форма находится в верхней части экрана.
Имеете в виду если раскрывающийся блок находится в самом верху, то при клике на Раскрыть страница прокручивается так что этот желтый блок становится по середине?
Интересно, конечно.
Если придумаете, то пишите 🙂
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 и куда писать эти буквы и цифры
Спасибо большое, все четко и без воды.
А санкций за такое сокрытие текста от поисковых систем не последует?
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Как скрыть показать текст
Задача заключается в том, чтобы нажав на ссылку/кнопку, появлялся/скрывался элемент (изображение, таблица, блок и т.д.). Для чего достаточно добавить небольшой CSS, скрипт не нужен.
Кнопка, нажав на которую появляются/прячутся комментарии Blogger
Все действия производим на вкладке «Шаблон».
Шаг 1. Два вхождения кодазаменяем на
Шаг 2. Выделенные участки кодазаменяем на
Показать/скрыть содержимое гаджета Blogspot
Результат можно посмотреть в Приложении 1.
Тренироваться будем на гаджете «Архив блога». Активизируем вкладку «Шаблон».
Шаг 1. Кодзаменяем на
Шаг 2. Выделенные участки кодазаменяем на
65 комментариев:
Можно также в сообщение добавить:
Скрипт пишем один раз, в том случае, когда скрытых блогов несколько. Woodman Подскажите Пожалуйста.
Возможно ли открытие текста(видео ролика) только после клика по ссылке wmlink.ru или tak.ru
Как это делают в Юкозе.
Заранее Спасибо. NMitra Приведите, пожалуйста, URL с примером. С Юкозе не работала, нужно посмотреть. NMitra Нащёлкалась от души.))) Пусть скажут спасибо)) Там показан код tak.ru, её и возьмём в качестве примера. На вкладке «Изменить HTML» при написании/редактировании сообщения добавляем код:
Выделенное жирным замените на своё. Woodman Огромное Спасибо За Ваши Труды.
Скрипт на tak.ru РАБОТАЕТ. А вот wmlink.ru немогу заставить работать. NMitra Не успела посмотреть, вы изменили страницу. NMitra wmlink.ru прикрыл лавочку. NMitra Не стала писать новую статью. Ещё один вариант:
Pavas Спасибо, очень помогло! А как можно сделать, чтобы ссылка, по которой кликаешь, чтобы показать скрытый текст, после его появления исчезала? NMitra Попробуйте как-то так:
Пример Pavas Спасибо, то что нужно! Космо Мизраил Горыныч NMitra, скрипт в сообщении №14 плохо работает. Мазилка.
Думал тут найти красивый спойлер без доп. библиотек NMitra У меня она же. В вашем примере добавлен идентификатор MVM, а так код тот же. С помощью ID вы показываете какой именно div нужно скрывать/показывать.
NMitra Добавить к стилям CSS
#skryt
label[for=»raz»]:hover
Описание:
выплывающий текст
Рекомендации:
выплывающий текст
Важная информация:
выплывающий текст
Ингридиенты:
выплывающий текст
http://shpargalkablog.ru/2011/07/accordion-css.html
http://shpargalkablog.ru/2012/03/css-tabs.html Анонимный Good article! We will be linking to this particularly great content
on our site. Keep up the good writing. NMitra Благодарю вас! Приятно слышать. Анонимный Way cool! Some extremely valid points! I appreciate you penning this article and
also the rest of the website is also very good. NMitra Спасибо за отзыв! Павел Бреусов Подскажите пожалуйста, а как заставить на главной странице блога весь текст скрывать и оставлять несколько предложений от статьи? А то у меня все статьи на главной странице полностью без скрытия. спасибо NMitra Есть иконка «разорванный листок» (или «обрезать статью») http://shpargalkablog.ru/2012/11/nastroit-blogger.html#panel Maximilian Edelman ДЯКУЮЮЮ NMitra Звертайтеся Анонимный Не работает кнопка на телефонах и планшетах, кто знает как поправить? NMitra Вероятно у них нет поддержки :checked, примените скрипт
Когда на них нажимаешь они в одну строку почемуто встают. как сделать чтобы они совсем друг от друга не зависели? Анонимный help! не получается! одна вкладывается в другую! help!
если попытаться их свернуть они вообще в один ряд становятся(((( NMitra Измените стиль кнопки, http://jsfiddle.net/NMitra/5uarcff5/1/