JSFiddle - React, Tailwind, and code Playground

by Daniel Mocan

HTML

<body>
<div class="div1">
This is some text and will be long.This is some text and will be long.This is some text and will be long.This is some text and will be long.
</div>
<button id='readmore1'>
Read More
</button>

<div class="div2">
This is some text and will be long.This is some text and will be long.This is some text and will be long.This is some text and will be long.
</div>
<button id='readmore2'>
Read More
</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</body>

CSS

.div1 {
    white-space: nowrap; 
    width: 250px; 
    overflow: hidden;
    text-overflow: clip; 
    //border: 1px solid #000000;
    margin-bottom: 10px;
}
.div2 {
    white-space: nowrap; 
    width: 250px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    margin-top: 20px;
     margin-bottom: 10px;
   // border: 1px solid #000000;
}
.divfull {
    width: 250px; 
    //border: 1px solid #000000;
    margin-bottom: 10px;
}

JavaScript

var $button1 = $("#readmore1");
var $button2 = $("#readmore2");

$button1.on("click", function(){
		var $div1 = $(".div1");
    $div1.removeClass("div1").addClass("divfull");
    $(this).remove();
});
$button2.on("click", function(){
		var $div2 = $(".div2");
    $div2.removeClass("div2").addClass("divfull");
    $(this).remove();
});