Перейти к содержимому

Как спрятать текст css

  • автор:

Как скрыть показать текст

Задача заключается в том, чтобы нажав на ссылку/кнопку, появлялся/скрывался элемент (изображение, таблица, блок и т.д.). Для чего достаточно добавить небольшой CSS, скрипт не нужен.

исчезающий текст

 .del < display: none; >.del:not(:checked) + label + * < display: none; >/* фактически нужна только одна строка */ /* вид CSS кнопки */ .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 id="raz" checked="checked"/>
исчезающий текст
  1. количество элементов на странице с class=»del» может быть сколь угодно велико
  2. id — идентификационный номер. Должен быть индивидуальным на html странице
  3. for должен совпадать с id
  4. если первоначально нужен невидимый элемент, который в последствии появляется, нужно убирать checked=»checked»

Кнопка, нажав на которую появляются/прячутся комментарии Blogger

Все действия производим на вкладке «Шаблон».

Шаг 1. Два вхождения кода

 : 

заменяем на

  

Шаг 2. Выделенные участки кода

.comments h4 < /* возможны вариации, ищем (Ctrl+F) "h4" */ margin: 1em 0 0; font: $(post.title.font); >

заменяем на

.comments h4, .nocomments + label < margin: 1em 0 0; font: $(post.title.font); >.nocomments + label + div, .nocomments < display: none; >.nocomments:checked + label + div

Показать/скрыть содержимое гаджета Blogspot

Результат можно посмотреть в Приложении 1.

Тренироваться будем на гаджете «Архив блога». Активизируем вкладку «Шаблон».

      

заменяем на

       

Шаг 2. Выделенные участки кода

h2
заменяем на

h2, .no + label < font: $(widget.title.font); text-transform: $(widget.title.text.transform); color: $(widget.title.text.color); margin: .5em 0; >.no + label + div, .no < display: none; >.no:checked + label + div < display: block; >.no + label:after /* стрелочка вверх */ .no:checked + label:after /* стрелочка вниз */

65 комментариев:

PANIC Спасибо! Очень полезная вещь!
Правда, у Вас написано в самом начале: «добавив ПЕРЕД: < /head>личный код», а дальше пишите, что ПОСЛЕ. В ходе испытаний разобрались. Сначала было не понятно, что для каждого одинакового по сути эффекта надо свое имя придумывать.
Еще раз спасибо) давно что-то подобное требовалось 🙂 NMitra Благодарю! Очень ценное замечание. Опечатки исправила. Побольше бы таких сознательных читателей. PANIC а теперь я запуталась — надо все-таки перед или после? я вставила код после и все работает. NMitra Перед. А то получится между небом (head) и землёй (body).

Извините, что не по теме, тяжело блог в Яндексе индексируется? Обратите внимание, что на всех страницах указан nofollow. Несмотря на noindex, в Google много страниц вида: http://mackapad.blogspot.com/search/label/audio?&max-results=10. Их надо удалять из поиска как дубликаты. Может быть из-за путаницы с мета тегами. http://shpargalkablog.ru/2010/07/kontent.html — вот здесь посмотрите. Мне помогло. PANIC признаться, я индексацией вообще мало занимаюсь. мне не очень всё это понятно. PANIC а можно данный скрипт указывать не в head? иначе у меня другой скрипт (не менее для меня полезный) не работает NMitra Я поняла что за скрипт. Протестирую, если не получится, предложу другой вариант. 1-2 дня. NMitra Здесь показано, как сделать меню вкладками http://shpargalkablog.ru/2011/01/menu-vkladkami.html. Если не ошибаюсь, данного эффекта нужно было добиться. Совместимость с возможностью скрывать/показывать текст проверила. PANIC мне нужны вкладки в теле сообщения. решение на http://amateurblogger.ru/2011/01/kak-sdelat-menu-vkladki-tab-menu.html — оно работает, но из-за него не работает скрывающийся текст, потому что оба стоят перед < /head>. т.е. работает тот, который стоит там последним. поэтому я и интересуюсь, можно ли Ваш код для скрытия/показа текста поставить не в head. NMitra Катерина — умница и профессионал. Но данный скрипт мне не очень нравится, поскольку совместно с IFRAME или тем же видео YuoTube, он не работает в браузере Internet Explorer и не позволяет отображать данные вкладки. Нужно его делать легче. Я подумаю как можно использовать только CSS в моём случае. NMitra Приношу свои извинения. На моём браузере не был установлен проигрыватель. Хочу уточнить один момент: вы хотите ролики YouTube добавлять во вкладки? Тогда возможно этот вариант будет интереснее — http://shpargalkablog.ru/2011/01/youtube.html? PANIC да вообще-то Катин вариант иногда и в chrome косо смотрится (видео в бок съезжают).
что я хочу написано в письме, послужившем причиной написания того сообщения.
да, я пытаюсь сэкономить место, но видео не всегда с YouTube вставляю. там вообще можно что угодно вставить (например, видео + описание).
посмотрела сейчас предложенные Вами варианты — мне не нравится, что при переключении видео сразу начинает воспроизводиться. k___k Мне легче такую вот конструкцию использовать http://pastebin.com/8dp6LjrH сразу в тело поста, без редактирования шаблона. NMitra Спасибо за ссылку — хорошее работоспособное решение.

Можно также в сообщение добавить:

Скрипт пишем один раз, в том случае, когда скрытых блогов несколько. Woodman Подскажите Пожалуйста.
Возможно ли открытие текста(видео ролика) только после клика по ссылке wmlink.ru или tak.ru
Как это делают в Юкозе.
Заранее Спасибо. NMitra Приведите, пожалуйста, URL с примером. С Юкозе не работала, нужно посмотреть. NMitra Нащёлкалась от души.))) Пусть скажут спасибо)) Там показан код tak.ru, её и возьмём в качестве примера. На вкладке «Изменить HTML» при написании/редактировании сообщения добавляем код:

Выделенное жирным замените на своё. Woodman Огромное Спасибо За Ваши Труды.
Скрипт на tak.ru РАБОТАЕТ. А вот wmlink.ru немогу заставить работать. NMitra Не успела посмотреть, вы изменили страницу. NMitra wmlink.ru прикрыл лавочку. NMitra Не стала писать новую статью. Ещё один вариант:

КНОПКА

СКРЫТЫЙ ТЕКСТ ПО СЕРЕДИНЕ МОНИТОРА

Pavas Спасибо, очень помогло! А как можно сделать, чтобы ссылка, по которой кликаешь, чтобы показать скрытый текст, после его появления исчезала? NMitra Попробуйте как-то так:

Думал тут найти красивый спойлер без доп. библиотек Воть, самый простейший спойлер без наворотов и излишеств 🙂 Лень было самому писать, поэтому подфиксил имеющийся 🙂

код http://snipt.org/uhhm5 NMitra У меня она же. В вашем примере добавлен идентификатор MVM, а так код тот же. С помощью ID вы показываете какой именно div нужно скрывать/показывать.

Да, я тоже предпочитаю не пользоваться библиотеками. С помощью стилей можно добиться необходимого эффекта. http://shpargalkablog.ru/2011/07/transformaciya-css.html NMitra Предыдущий вариант статьи http://prilozhenie1.blogspot.com/2012/08/blog-post.html Uok Может мне поможете? Я добавил два гаджета (Подписка и Ярлыки) но они не появились на блоге .В чем проблема непойму! посмотреть можно здесь
http://uok-newsblog.blogspot.ru/ NMitra У вас после Top100 Рамблера что-то непонятное в коде твориться. Почитайте тут http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html Наталка Михайлівна Зуб Спасибо ОГРОМНОЕ. Долго искала как скрыть(показать) текст, и нашла у Вас. Еще раз спасибо.Мне это очень было нужно.. Анонимный Ребята как здесь изменить черный цвет выпадающего текста на белый??
в скрипте с кнопкой нажать.

NMitra Добавить к стилям CSS
#skryt Анонимный Спасибо огромное, а чтобы кнопка отображалась, изменив курсор Анонимный как кнопка. NMitra Посмотрите здесь http://shpargalkablog.ru/2012/04/css-knopki.html

label[for=»raz»]:hover Mails здорово, спасибо. А если у меня не 1 кнопка с скрытым текстом, а 4 штуки. И они должны идти последовательно вроде этого:
Описание:
выплывающий текст
Рекомендации:
выплывающий текст
Важная информация:
выплывающий текст
Ингридиенты:
выплывающий текст

Как сделать так, чтобы например принажатии на 1 кнопку, оставшиеся 3 остальные кнопки спускались вниз вконец открывающегося текста 1 кнопки. .
NMitra На ваш выбор:

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, примените скрипт

исчезающий текст

Анонимный Спасибо! Анонимный Здравствуйте, а подскажите пжл. как реализовать кнопку «показать еще» при нажатии которой открывается 4 блока, затем нажимаешь ее еще раз еще 4 блока и так до бесконечности . NMitra Здравствуйте. можно на JS (поддержка, начиная с IE8)

var p = 1;
document.querySelector(‘#raz’).onclick = function() div = document.querySelectorAll(‘div.raz’+p);
for (var i = 0; i < div.length; i++) div[i].style.display = "block";
>
p++;
>
Анонимный спс. получилось, а можно ли сделать что бы они плавно выезжали . помогите пжл. NMitra Извините, это требует больше времени, чем я располагаю http://shpargalkablog.ru/p/comments-blog.html Вячеслав Соколов Здравствуйте. Красивая у вас кнопка. Я так понял ее можно, форму и цвет, изменять под себя. А если несколько кнопок установить, они будут работать, или нужно что то менять в коде? И что менять. А то у меня уже была проблема. Спасибо. NMitra Здравствуйте, конечно, форма и цвет может быть любой. Несколько кнопок тоже будет работать, но у каждой должен быть свой id, а у label свой for, такой же как id рядом стоящей кнопки. Пример http://jsfiddle.net/NMitra/5uarcff5/ Nooorganic Movement Мне больше подошла возможность http://pastebin.com/8dp6LjrH.
Но вставленный текст не переносит по словам, буквы отрывает. Анонимный Весьма полезная штука! спасибо! Подскажите, как можно сделать, чтобы после нажатия открывался текст, но сама кнопка пропадала? NMitra .del:checked + label background: #e36443;
>

.del:checked + label display: none;
> Анонимный Добрый день! Подскажите пожалуйста: добавляю ваш код, всё работает, но мне нужно, чтобы кол-во таких элементов на странице было несколько и они были независимы друг от друга. А у меня получается, что добавляя этот код несколько раз он подчиняется одной ПЕРВОЙ кнопке, она как бы содержит в себе все остальные и скрывает/открывает их. Причёт они сами не работают! Как сделать несколько таких элементов независимых друг от друга? Анонимный . писал про первую кнопку с скрыв./открыв. текстом. NMitra Добрый день, посмотрите комментарий 54 Анонимный NMitra. спасибо! Получилось, но не совсем то! http://group-atlantis.ru/individuals/casco/hidden-text/index.php?bitrix_include_areas=N&clear_cache=Y

Когда на них нажимаешь они в одну строку почемуто встают. как сделать чтобы они совсем друг от друга не зависели? Анонимный help! не получается! одна вкладывается в другую! help!
если попытаться их свернуть они вообще в один ряд становятся(((( NMitra Измените стиль кнопки, http://jsfiddle.net/NMitra/5uarcff5/1/

.del + label display: block;
max-width: 6em;
text-align: center;
> Unknown как сделать так что бы в таб можно было вставлять не только слова html css но и целуе блоки, например с картинкой . NMitra Вставьте вместо текста, блоки или картинки 🙂

Как скрыть лишний текст?

Здравствуйте коллеги, нужна ваша помощь, есть блок фиксированной высоты, как убрать лишний текст, выходящий за пределы блока, и добавить гиперссылку в конце, по типу «подробнее», «далее» и т.д.. Прошу учесть то, что блоков с текстом произвольное количество и у них всех одинаковый класс.
Также даю ссылку на JsFiddle https://jsfiddle.net/t8xcLf2k/1/

5d5e97a0cbf2b092265275.jpeg

Дополнение:
— Желательно без сторонних плагинов
— Что-то по типу этого

  • Вопрос задан более трёх лет назад
  • 2268 просмотров

Как скрыть часть текста на мобильных

Приветствую Вас знатоки.
Уже несколько дней ломаю голову над тем, как мне крыть таблицу цен на мобильных устройствах.

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

Вот хочу скрыть эту таблицу, и в замен создать новую под мобильные телефоны и скрыть ее от просмотра на ПК.
Может знает кто то, как это сделать ?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Скрыть часть текста
Здравствуйте! Подскажите как сделать. В файлах между тегали <DIV >

Скрыть часть текста по ширине
вообщем проблема в скрытии текста в первом блоке. там указано значениеoverflow:hiddenно оно к.

Скрыть часть текста, вышедшего за пределы div
Привет, мир! Помогите пожалуйста, нужно сделать так как на картинке (уже перепробовал куча.

Как скрыть часть обьекта в html.
Есть swf-ка она идёт по всей ширине сайта, но на её верхней части сылка создателя, как скрыть.

Эксперт HTML/CSS

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908
гуглите медиа запросы
Регистрация: 09.11.2016
Сообщений: 40

Та я уже как только не гуглил.
Долго пытался внедрить такую схему, но безуспешно .

. Как показать контент только на мобильных устройствах или как спрятать контент для мобильных устройств.

Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код внутри тэга-контейнера

1 2 3 4 5
body> в том месте, где этот контент должен отображаться div> Здесь текст или изображение. /div>

Для тэга

ниже прописан CSS-класс show-on-mobile. Все свойства этого класса пишутся в отдельном коде и добавляется перед или в отдельный CSS-файл (во втором случае нужно использовать код без контейнера