JSFiddle - React, Tailwind, and code Playground

by tanoloco

HTML

<center>
    <h1 class="truncate">
        This is a header that
        takes up two lines
    </h1>
    
<br>

    <h1 class="truncate">
        This is a header that takes 
        up three lines because it
        is really, really long
    </h1>
    
<br>
    
    <h1>
        This is a header pretty short
        or pretty long ... still undecided
        which in any case is not truncated!
    </h1>
</center>

CSS

h1 {background-color: yellow;}

#hiddenDiv
{
    background-color: pink;
    display: table-cell;
    visibility:hidden;
}

JavaScript

var MAXCOUNT            = 20;
var COUNT_SPACES        = false;
var EXACT                = false;
var COUNT_PUNCTUATION    = true;
var BLOCKS_CLASS        = 'truncate';

window.onload = function () 
{
    var hidden = document.getElementById('hiddenDiv');

    if (hidden == null)
    {
        hidden = document.createElement('div');
        hidden.id = 'hiddenDiv';
        document.body.appendChild(hidden);
    }
    
    var blocks = document.getElementsByClassName(BLOCKS_CLASS);        

    for (var i=0; i<blocks.length; i++)
    {
        var block            = blocks[i];
        var text            = block.innerHTML;
        var truncate        = '';
        var html_tag        = false;
        var special_char    = false;
        maxcount            = MAXCOUNT;
        for (var x=0; x<maxcount; x++)
        {
            var previous_char = (x>0) ? text.charAt(x-1) : '';
            var current_char = text.charAt(x);
            
            // Closing HTML tags
            if (current_char == '>' && html_tag)
            {
                html_tag = false;
                maxcount++;
                continue;
            }
            // Closing special chars
            if (current_char == ';' && special_char)
            {
                special_char = false;
                maxcount++;
                continue;
            }
            // Jumping HTML tags
            if (html_tag)
            {
                maxcount++;
                continue;
            }
            // Jumping special chars
            if (special_char)
            {
                maxcount++;
                continue;
            }
            // Checking for HTML tags
            if (current_char == '<')
            {
                var next = text.substring(x,text.indexOf('>')+1);
                var regex = /(^<\w+[^>]*>$)/gi;
                var matches = regex.exec(next); 
                if (matches[0])
                {
                    html_tag = true;
           ...