Показать - спрятать длинный текст

[mediafoks]

Добрый день, уважаемые разработчики!
Имеется параграф с длинным текстом:

<p class="paragraph">ipsum dolor sit amet consectetur adipisicing elit. Labore enim explicabo accusamus
                eveniet illum possimus nam veniam debitis omnis suscipit ex officiis praesentium harum laborum neque
                culpa, ipsam porro! Quisquam officiis distinctio excepturi autem quo eligendi adipisci, mollitia
                quibusdam rem id dolore magnam, eius minima saepe aspernatur possimus laborum facere!</p>

Задача:
Если длина параграфа больше "N" символов, то обрезать его до "N" символов и в конце добавить троеточие, и при клике на сам параграф показывать отрезанное содержимое (т.е. весь параграф целиком). А при повторном клике опять скрывать. Нечто типа спойлера.
Обрезку я сделал так:

var cropTxt = document.querySelector('.paragraph')
 
String.prototype.trimTxt = function (length) {
  return this.length > length ? this.substring(0, length) + '...' : this
}
cropTxt.innerText = cropTxt.innerText.trimTxt(25)

Как быть с кликом никак не дойду.
Может как-то по-другому подойти к вопросу. Может лишний текст как-то оборачивать в span и скрывать его уже стилями?

[ksa]

Если длина параграфа больше "N" символов, то обрезать его до "N" символов и в конце добавить троеточие, и при клике на сам параграф показывать отрезанное содержимое (т.е. весь параграф целиком). А при повторном клике опять скрывать.

Как вариант...

<style>
.short {
	width: 200px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>
<p class="paragraph short">
	ipsum dolor sit amet consectetur adipisicing elit. Labore enim explicabo accusamus
	eveniet illum possimus nam veniam debitis omnis suscipit ex officiis praesentium harum laborum neque
	culpa, ipsam porro! Quisquam officiis distinctio excepturi autem quo eligendi adipisci, mollitia
	quibusdam rem id dolore magnam, eius minima saepe aspernatur possimus laborum facere!
</p>
<script>
document.querySelector('p').addEventListener('click', (e) => {
	e.target.classList.toggle("short")
})
</script>