Przycinanie części elementu

Próbuję obciąć linie wyświetlane tylko częściowo.
Screen
Oznaczone kolorem różowym.

Wymyśliłem, że można wyświetlić tylko obiekty widoczne całkowicie:

GetVisibleElements: function(nodes, filterOnlyText = true, sync = true) {
            var visibleNodes = [];
            
            for(var i = 0; i < nodes.length; i++)
            {
                try {
                    if(filterOnlyText) {
                        if(!this.IsElementContainingText(nodes[i]))
                            continue;
                    }
                    
                    var rect = nodes[i].getBoundingClientRect();

                    if( rect.top >= 0 && 
                       rect.left >= 0 && 
                       rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && 
                       rect.right <= (window.innerWidth || document. documentElement.clientWidth) ) 
                    {
                        visibleNodes.push(nodes[i]);
                    }
                } catch(errur)
                {
                    //console.log("Unable to get rect for node: " + nodes[i]);
                }
            }
        
        if(sync)
        {
            this.visibleNodes = []; 
            this.visibleNodes = visibleNodes.slice(0);
        }
        
        return visibleNodes;
    }

Problem polega na tym iż niektóre długie akapity/elementy zawierające tekst nie są w ogóle wyświetlane (oznaczone kolorem niebieskim). Będzie możliwość wyłącznie przesuwania widoku o całą wysokość vieportu, co eliminuje dopasowywanie za każdym razem widoczności elementów.
Przydało by się na początku "pociąć" elementy w zależności od wielkości viewportu, a później wyświetlać ile się zmieści.
Nie mogę użyć żadnej biblioteki ani frameworka :<

Macie pomysł jak to ugryźć?