Как реализовать такой функционал на JS?

Question

[DeniSidorenko]

Добрый день, есть стандартный функционал. Текст и кнопка читать подробнее. Проблема в том что текст не разделен на абзацы. А весь большой текс в один абзац ( тег p ). И требуется обрезать данную строку через js. - Это не проблема. Проблема в том как сделать что бы при клике на показать весь текст - показывался текст который мы уже обрезали. И если это даже понятно еще как сделать ( до того как обрезать сохранить весь текст в другой переменной ), то каким образом сделать что бы когда текст становится большим, это было хоть как то анимированно, а не просто текст добавился?

Comments

[WapSter]

Вообще хз интересная задача. Но вот мысль. Обрезанному тексту добавлять дом элемент, и его аннимировать.

[Роман]

DeniSidorenko, от такого выражения мыслей хочется громко ругаться матом

[I'm Yoda]

а собственно зачем обрезать текст на js, можно же обернуть текст в блок и сделать ему фиксированную высоту, с "owerflow: hidden". При клике на "Показать весь текст", просто меняем высоту в авто например и всё. Это проще будет.

[DeniSidorenko]

Роман, ругайся

Answer 1

[Антон Неверов]

1) Текст можно обрезать с помощью CSS.
2) Вы всегда можете обрезать часть текста с помощью тегов. Например:

<p>
  Здесь видимый текст, далее идёт <span style="display: none;">невидимый текст</span>
</p>

А далее уже отбирать style у span'а и отображать невидимый текст.
3) Можно обрезанный текст поместить в аттрибут по типу data-text. А по команде брать его оттуда и вставлять в абзац.

Реализации идут от лучшей к худшей.

Answer 2

[I'm Yoda]

а собственно зачем обрезать текст на js, можно же обернуть текст в блок и сделать ему фиксированную высоту, с "owerflow: hidden". При клике на "Показать весь текст", просто меняем высоту в авто например и всё. Это проще будет.

Comments

[DeniSidorenko]

Проблема в том что они именно требуют что бы текст сам обрезался.Я поэтому и написал что весь текст в одно теге