JSFiddle - React, Tailwind, and code Playground
HTML
<div id="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio felis, accumsan eget aliquet vitae, faucibus et turpis. Sed in enim libero. Aliquam pretium sapien nec odio consequat at convallis neque bibendum. Maecenas tortor nibh, porta nec gravida eu, eleifend nec magna. Phasellus sollicitudin elit at quam sollicitudin vitae ultrices erat condimentum. Curabitur vitae mauris vel magna commodo elementum eu non nisl. Aliquam rhoncus dui quis nibh iaculis eget eleifend metus convallis. Nullam sed mauris fermentum tellus posuere varius sit amet quis odio. Integer congue, massa eget ullamcorper venenatis, libero sem laoreet ipsum, eu adipiscing augue tellus sagittis nisl. Nam.</div>
JavaScript
var item = document.getElementById('item'),
text = item.firstChild.nodeValue,
punctations = /[.!?\u00a1\u203c\u2026\u00bf\u203d]\s|\u3002/,
result, more, teaser, teaserNode, children, i, length,
displayed = false;
teaserLength = 150;
var morelink = document.createElement('span'); // valami amiből lehet tudni h nem a teljes szöveg
morelink.innerHTML = " More..";
if (text.length > teaserLength) {
result = punctations.exec(text.slice(teaserLength));
if (result) {
teaser = text.slice(0, teaserLength + result.index + result[0].length);
// Eltávolítjuk a childeket
children = item.childNodes;
for (i = 0, length = children.length; i < length; i += 1) {
item.removeChild(children[i]);
}
// Lecseréljük a tartalmat
teaserNode = document.createElement('span')
teaserNode.appendChild(document.createTextNode(teaser));
item.appendChild(teaserNode);
//item.appendChild(morelink); // beszurod a valamit is a rövid szöveg után
more = document.createElement('span');
more.style.display = 'none';
morelink.style.display = 'inline';
more.appendChild(document.createTextNode(text.slice(teaser.length)));
item.appendChild(more);
item.appendChild(morelink); // beszurod a valamit is a rövid szöveg után
// Kezzeljük a kattogtatást.
item.onclick = function () {
displayed = !displayed;
show = !displayed;
more.style.display = displayed ? 'inline' : 'none';
morelink.innerHTML = show ? ' More..' : ' Less..';
}
}
}