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

Question

[Mary Солнечная]

Всем привет. Появилась задача реализовать вот такой блок


С затуханием вообще никаких проблем, а вот с текстом уже вопрос. Если присмотреться, то кол-во символов обрезано а остальная часть текста скрыта. Надо при клике на стрелку развернуть весь текст.

Использовала плагин liTextLength, он всем хорош, кроме одного - если работаешь чисто с одним абзацем. А если несколько кусков текста со своими стилями стоят, то это уже не подходит - он убирает все теги внутри обращенного элемента и разумеется вся красота испаряется :(

Как грамотно вообще реализовать такую штуку? Буду благодарна за помощь :)

Comments

[iBird Rose]

уверен что нужен этот бесполезный подсчет символов? я думаю по дизайну полюбому хватит и того чтобы ограничить высоту элемента и дать ему overflow: hidden;

[Сергей Горячев]

iBird Rose: Это девочка)

[iBird Rose]

Sergey Goryachev: для меня в интернете все - мужики

Answer 1

[profesor08]

Это легко решается. Вам не надо подсчитывать кол-во символов и не надо беспокоиться о наличии тегов внутри блока. Вот вам мой пример: https://jsfiddle.net/profesor08/Lcs9433t/

Comments

[Mary Солнечная]

Хороший вариант! Насколько я поняла в этом примере даже не важно какая будет высота у блока с текстом

[Mary Солнечная]

У меня только вопрос есть - как переписать этот скрипт так, чтобы можно было использовать несколько блоков с затуханием на странице?

[Mary Солнечная]

А, все отлично! Там все просто) Я переписала код на jquery и все сразу стало понятно. Отличный пример, спасибо!

Answer 2

[Дмитрий Пыркин]

Считать количество символов и после нужного количества прятать

Answer 3

[Сергей Горячев]

Ну, если хочется помучиться, то пожалуйста dotdotdot.frebsite.nl