JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <h2>Статья 1</h2>
бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-блa бла-бла бла-блa бла-бла бла-блa бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-блa бла-бла бла-блa бла-бла бла-блa 11111
</div>
<div class="item">
    <h2>Статья 2</h2>
бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-блa бла-бла бла-блa бла-бла бла-блa 2222222222
</div>
<div class="item">
    <h2>Статья 3</h2>
бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла бла-бла...

CSS

.item {
    word-wrap: break-wrap;
}

.overlaping {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0, .5);
  display: none;
}

.overlaping .txt {
  width: 500px;
  margin: 50px auto 0;
  padding: 30px;
  background: rgb(255,255,255);
}

JavaScript

var overlap = null;

$(".item").each(function() {
    if( !overlap ) {
        overlap = $("<div class='overlaping'><div class='txt'></div></div>").appendTo($("body"));
        overlap.click(function(){
            $(this).css("display","none").find(".txt").html("");
        });
    };
    
    var review = $(this).html();
    var more = ' ...<a href="#" class="full"> читать полностью &rarr;</a> ';
    
    if( review.length > 500 ) {
        $(this).html( review.substring(0, 500) +  more);
    }
    
    if( $(this).find(".full").length ) {
        $(this).find(".full").click( function(e) {
            e.preventDefault();
            overlap.css("display","block").find(".txt").html(review);
        });
    }
});