JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="line-clamp">
    Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep
     Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep Lorem ipsum dolor si
    t amet, consectetur adipisicing elit. Itaque iure perferendis at, nemo obcaecati cum veniam autem impedit rep
                <h2>hello world</h2>

    ellendus molestiae deleniti, officia dolorem nisi aliquid, iusto accusamus tempore necessitatibus dolor.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut, earum ipsam temporibus. Modi voluptas repellendus, nisi molestias quas, adipisci praesentium officiis dolores commodi eaque officia quam impedit error qui.
</div>

<div class="line"></div>

<div id="test-1"></div>
<div id="test-2"></div>
<button id="read-more">read more</button>

CSS

* {
    line-height: 21px;
}
body {
    overflow-y: scroll
}
h2 {
    text-align: center;
}
.line {
    height: 2px;
    background: red;
    margin: 40px 0;
}
#test-1 {
    max-height: 105px;
    overflow: hidden;
}
#test-2 {
    display: none;
}

JavaScript

var html = document.querySelector('#line-clamp').innerHTML;

console.log(html.split('<h'))

document.querySelector('#test-1').innerHTML = html.split('<h')[0]
document.querySelector('#test-2').innerHTML = '<h' +  html.split('<h')[1]

$('#read-more').click(function(){
	$('#test-1').css({ maxHeight : 'unset' })
	$('#test-2').toggle()
})