JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" >

</div>
<div id="full_content" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat purus, sollicitudin quis metus sit amet, ultrices hendrerit arcu. Nulla maximus pharetra tincidunt. Phasellus tincidunt semper sem tempus dapibus. Pellentesque ligula nibh, eleifend ut dictum sed, aliquam et orci. Curabitur tempor augue non turpis elementum imperdiet quis vel tortor. Quisque nec rutrum justo. Praesent scelerisque dignissim nisi. Etiam et gravida mi.

Pellentesque dolor sapien, imperdiet nec convallis non, dictum a arcu. In hac habitasse platea dictumst. Mauris consectetur ultrices nibh nec vestibulum. Etiam maximus, nunc in euismod bibendum, neque ex iaculis nisl, eu finibus velit turpis vitae lacus. Etiam feugiat accumsan viverra. Vivamus turpis libero, molestie at eleifend et, ultrices ut tellus. Donec ipsum tortor, sagittis in aliquet eget, ullamcorper hendrerit erat. Praesent nec mi finibus, malesuada ex et, commodo tortor. Maecenas justo mi, posuere ut laoreet egestas, pretium sit amet est. Curabitur orci tortor, rutrum eu tristique a, ullamcorper vitae augue. Aenean condimentum erat vitae ex semper bibendum. In hac habitasse platea dictumst. Ut ullamcorper quis magna at gravida. Integer eu commodo neque, sit amet ullamcorper nisi. Nullam magna nulla, faucibus a suscipit in, vulputate eu nulla.

Phasellus sit amet bibendum erat. Etiam maximus id lorem vel porttitor. Sed quis nibh feugiat, ultricies neque non, porta turpis. Donec viverra lacinia risus vitae vulputate. Fusce tincidunt luctus sem, tempus lobortis urna cursus a. Suspendisse egestas magna sit amet mattis fermentum. Sed tempor, ligula vel tincidunt efficitur, neque nisi faucibus purus, congue iaculis urna sem tincidunt sapien. Fusce aliquet euismod neque, id aliquam diam posuere id. Praesent aliquet orci id tincidunt pellentesque. Vivamus id metus id erat convallis dapibus. In fermentum nulla ex, vitae pulvinar diam semper eu. Donec sagittis purus eget maximus...

CSS

body{
            font-size: 40px;
        }
        #content{
            float: left;
        }
        #full_content{
            float: left;
            visibility: hidden;
            display: none;
        }

JavaScript

var index = 0;
        function cutText(index) {
            if (!index) index = 0;
            if(index < 0) index = 0;
            //var width = window.screen.width;
            var text = document.getElementById("full_content");
            var fontSize = getComputedStyle(text).getPropertyValue("font-size").replace("px", "");
            var doc = document.documentElement;
            var width = document.documentElement.clientWidth;
            var height = document.documentElement.clientHeight;
            var strText = text.textContent;
            //calculate text length for screen
            var charMaxWidth = 10;
            var maxChars = (Math.ceil(width / (fontSize / 3)) * Math.ceil(height / fontSize)) / 2;

            var startCut = index;
            if (index > 0) {
                startCut = index * maxChars;
                //startCut = index + maxChars;
            }
            //Check if the next cut not contains an empty string
            if(strText.slice(startCut,  startCut+maxChars).length == 0){
                index--;
                startCut = index * maxChars;
            }
            //only permit if the startCut be less of strTextLength
            if(startCut < strText.length){
                var content = document.getElementById("content");
                content.innerHTML = strText.slice(startCut,  startCut+maxChars) + "...";
                console.log(startCut,maxChars);
            }
        }
        window.onload = function(){
            cutText(0);
        }
        window.onkeydown = function(e){
            //Navigate bt code
            if(e.keyCode == 38){
                cutText(index--);
            }
            if(e.keyCode == 40){
                cutText(index++);
            }
        };