maxim1978,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item {
width: 380px;
}
p span {
color: blue;
text-decoration: underline;
cursor: pointer;
}
p span:hover {
color: darkblue;
}
</style>
</head>
<body>
<div class="item">
<p class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
</p>
</div>
<script>
document.querySelectorAll(".item p").forEach(function(el) {
el.dataset.html = el.innerHTML
el.innerHTML = el.innerHTML
.split("", 240)
.join("")
.toLowerCase()
.padEnd(245, ".");
el.insertAdjacentHTML("beforeend", "<span>Показать весь</span>");
});
document.addEventListener("click", function({ target }) {
let p = target.closest("p.description"), html;
if (p && (html = p.dataset.html)) p.innerHTML = html;
});
</script>
</body>
</html>
|