JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<div>Lorem ipsum dolor sit amet, athenagoram rigorem nisl cum magna anima te ad quia ad suis. Supervenit discrimina materialitas filia dedit erat, pertulit sed eu fugiens laudo misera Tharsia. Mancipia dolor invenerit adduci in fuerat accidens quam crucis coniunx, post discipulae venit est Apollonius mihi quidditas tuo dolor ad suis. Quodsi animae tertio eam ad te in. Dicis ubi diu requievit agi coepit. it est Apollonius mihi quidditas tuo dolor ad suis. Quodsi animae tertio eam ad te in. Dicis ubi diu requievit agi coepit. it est Apollonius mihi quidditas tuo dolor ad suis. Quodsi animae tertio eam ad te in. Dicis ubi diu requievit agi coepit.</div>

CSS

div {
    width: 325px;
    height: 190px;
    overflow: hidden;
    background: #eee;
}

JavaScript

/**
 * Object to hold our functionality for the ellipsis
 */
var dynamic_read_more = {
    // Class identifier
    class_identifier: 'char',
    
    /**
     * Internal helper to count visible chars and also adds identifying spans to them.
     */
    determine_visible_characters: function( $el ) {
      var text = $el.text();
        var visible_characters     = 0;
        var current_visible_width  = 0;
        var current_visible_height = 0;
        
        $el.html( '' );
        
        // Start out being with visible class.
        var character_class = 'visible-' + this.class_identifier;
        
        for ( var i = 0; i < text.length; i++ ) {
            var $span = $( '<span class="char-' + i + ' ' + character_class + '"></span>' );
            $span.append( document.createTextNode( text.charAt( i ) ) );
            $el.append( $span );
            
            var el_width  = $el.outerWidth();
            var el_height = $el.outerHeight();
                        
            // Determine if this character is at the end
            if ( current_visible_width < $el.outerWidth() ) {
                visible_characters++;
                current_visible_width = current_visible_width + $span.outerWidth();
            } else {
                if ( current_visible_height < ( el_height - 10 ) ) {
                    visible_characters++;
                    current_visible_height = current_visible_height + $span.outerHeight();
                    
                    console.log( 'El: ' + el_height );
                    console.log( 'Current: ' + current_visible_height );
                    console.log( i );
                   
                    // Reset the width check
                    current_visible_width = 0;
                } else {
                    character_class = 'invisible-' + this.class_identifier;
                }
            }
        }
        
        console.log( current_visible_height );
        
        return...