Как спрятать часть текста на CSS или кнопка"Еще"?
Есть блок в котором находится описание товара. Возможно ли сделать с помощью свойств CSS, если текст больше блока, то часть его скрывается и появляется кнопка, по нажатию на которую блок с текстом полностью открывается. Сейчас в голове только вариант с помощью overflow: hidden и js или label, input. менять высоту блока.
Можно вот так сделать
Если Вы хотите именно кнопку, чтобы на неё кликать, то тут без js не обойтись. На чистом CSS можно сделать следующее: по умолчанию задать блоку какую-то строгую высоту и overflow: hidden, а по наведению (hover) менять высоту на auto.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как скрыть часть текста?
Вариантов много, зависят некоторые от особенностей поведения и вёрстки.
Но вот, как я делаю чаще подобную задачу:
— Оборачиваем текст в контейнер (по умолчанию выставляем ему высоту) и внутри контейнера кладём ещё один div-блок (пропишите ему свойства, абсолютное позиционирование внизу контейнера, сделайте background градиентом или в фотошопе сделайте нужный спрайт)
— Слушаем клик по контейнеру с текстом и после клика делаем .slideDown() одновременно скрывая div-блок с градиентом (можно сразу просто убрать, а можно fideOut() прописать)
При повторном клике по тексту можно проверить, открыт он или нет (можно вешать какой-нибудь класс для проверки), и если открыт, то делаем animate(
Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS
Задача. Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
Решение 1. Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот HTML и CSS Код №1 для примера:
- Тег input должен обязательно стоять перед обрабатываемым контентом . Через него происходит переключение, с помощью тега label и ссылаемся на чекбокс input через for=»read-more-checker» .
- В теге div с class=»limiter» размещается сам контент. В его стилях мы и устанавливаем необходимую высоту видимого контента.
- Тег div с class=»bottom» – это блок с градиентным фоном, который показывает, что под контент не полный и внизу есть что-то ещё. Его нужно настроить под свой контент.
- Тег label с class=»read-more-button» – тот элемент через который будет осуществляться скрытие и отображение всего контента. Также благодаря псевдоэлементам :after и :before мы можем сделать чтобы текст в условной кнопке для разворачивания изменялся в зависимости от состояния (Развернуть/Свернуть).
Источник: Aida Drogan
Решение 2. Дополнение к Решению 1, когда блоков где текст скрывается под кат несколько. Если блоков несколько, то и class, id, for со значением ‘read-more-checker’ должны различаться у всех блоков, а в стилях нужно продублировать правила где есть класс read-more-checker для новых блоков.
Можно немного уменьшить код за счет использования пользовательских атрибутов data- , а class=»read-more-checker» убрать — Код №2.
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Всю голову сломал, как же сделать, чтобы после нажатия на кнопку Развернуть форма не прыгала вниз по экрану. Это происходит лишь тогда когда желтая форма находится в верхней части экрана.
Имеете в виду если раскрывающийся блок находится в самом верху, то при клике на Раскрыть страница прокручивается так что этот желтый блок становится по середине?
Интересно, конечно.
Если придумаете, то пишите ��
Решил вопрос, заменив у .limiter .bottom absolute на sticky
Спасибо, всё супер, но возникла проблема. Если на странице несколько разворачивающихся блоков, то когда разворачиваешь верхний, то разворачиваются и те, что ниже. Как этого избежать?
Если есть несколько таких блоков, то у них должны быть разные class, id и for ‘read-more-checker’. Например, для первого блока используем class, id, for — «read-more-checker«. Для второго — ‘read-more-checker-2′, третьего — ‘read-more-checker-3′ и т.д. А в стилях нужно продублировать все правила где есть класс ‘read-more-checker’ через запятую.
Например, у нас было с одним блоком такое правило:
.read-more-checker:checked
с двумя это будет так:
.read-more-checker:checked
Если не получится разобраться, то напишите — я тогда в статью этот случай добавлю.
Как спрятать часть текста, но так, чтобы он индексировался ПС?
Хочу показывать лишь часть текста, например, первые 1000 символов и дальше показывать ссылку «развернуть» или «читать дальше». При этом хотелось бы, чтобы Яндекс и Гугл индексировали весь текст, в том числе и спрятанный точно также, как если бы он весь был виден на странице. Т.е. без санкций и понижения в выдаче.
Возможно ли это сделать с помощью CSS и/или jQuery? Или в любом случае ПС будут понижать в выдаче такие страницы?
- Утечка исходных кодов сервисов Яндекса
- UPD: Google не индексирует контент по ссылке «Нажмите, чтобы прочитать»?
- Google: если скрытый контент важен для пользователей, нельзя скрывать его от них
Аяксом подтягивайте — тогда пс не увидят
А можно поподробнее? Гружу весь текст в DIV, потом аяксом тяну «короткую» версию? Мне кажется слишком громоздкое решение, может быть попроще есть способы?
Вам же надо что бы пс увидели )))) вы уж определитесь , можно вообще закладки использовать
А чем подход с аяксом отличается от того, что я загружу весь текст, потом скрою его часть (или подставлю короткую версию текста) с помощью JS? Просто аякс заметно более ресурсозатратен, скорость выполнения ниже.
тс, используй обычный спойлер средствами ксс или жс.
ПС пессимизирует только за тексты, которые пользователь в принципе не может прочитать: прикрытые дисплей нон, когда цвет шрифтом фона, когда текст задвинут в невидимую область и проч.
Однако я не понимаю другого:
Т.е. задумка такая: часть текста на странице, дальше спойлер и ссылка на страницу с полной версией текста?