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

Question

[Александр Коновалов]

Здравствуйте. Потребовалось сделать полу скрытый текст на сайте. Например, в скрытом виде видно только 2 строки, а при разворачивании все остальные. Полазил в гугле, нашел скрипты только полностью скрытых текстов и все они с hidden'ом. А мне нужно, чтобы он читался поисковиками. Как вот здесь - https://www.wildberries.ru в самом низу "Читать далее »"

Подскажите, пожалуйста, скриптик для этого дела

Answer 1

[a-crv]

https://jsfiddle.net/pyzrct4w/3/

Comments

[Александр Коновалов]

gashrez спасибо, подскажите, пожалуйста, как кнопку раскрыть поставить перед текстом?

Answer 2

[Антон Щербаков]

jquery, код на codepen рабочий, почему-то не выполняются jquery функции.
codepen.io/anon/pen/GZgpGJ

Comments

[Александр Коновалов]

Антон Щербаков не рабочий, блок не разворачивается

[Антон Щербаков]

Александр Коновалов: Еще раз, если вы посадите html + css + js код на страницу - все будет работать. У меня codepen почему-то глючит сегодня.

Answer 3

[ТыжСисАдмин]

Нет там скриптиков, онли CSS онли хардкор :)

Посмотрите "код элемента", там в стилях увидите "linear-gradient......"

Comments

[Александр Коновалов]

Алексей POS_troi а кнопка разворачивания?

[ТыжСисАдмин]

При клике, просто яваскриптом добавляется "display: none;" в стиль div-a который накладывает градиент.
Просто посмотрите на это всё в консоли разработчика, там всё видно :)

Answer 4

[Александр]

//контейнер к котрому применять правила с классом read_more
       //в нем блок с текстом
        if ($('div').is('.read_more')) {
            var getHeightDiv = $('.read_more').children('div');
            
            if ($(getHeightDiv).outerHeight() > 160) {
                $(getHeightDiv).addClass('hidden8').after('<span class="readmore">ЧИТАТЬ ДАЛЕЕ</span>');
            }
            $('span.readmore').on('click', function () {
                $(this).prev('div.hidden8').removeClass('hidden8');
                $(this).remove();
            });
        }

.hidden8{
line-height: 20px;
max-height: 160px;
overflow: hidden;
}

div class="read_more"
div
здесь длинный текст
/div
/div

допустим что line-height у нас 20px
нам нужно показать не более 8 строк текста
отсюда название класса hidden8
и max-height: 160px это результат 20*8

прозрачность градиентом делается как уже было написано