JSFiddle - React, Tailwind, and code Playground

HTML

<p class="shortable" data-length="20">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="shortable" data-length="20">Lorem ipsum dolor</p>

JavaScript

$('.shortable').each(function(index) {
    //Get the Text
    var text = $(this).text();

    //Get the wanted Length
    var wantedLength = $(this).data('length')
    
    //Get the current Length
    var currentLength = text.length
    
    //If it should be shorten
    if (wantedLength < currentLength) {
        //Get Half Length
        var halfLength = Math.round(wantedLength / 2)
        
        //Get the Text Parts
        var first = text.slice(0, halfLength); 
        var last = text.slice(0-halfLength); 
        
        //Change the Text
        $(this).text(first + "..." + last);
    }
});