Determine text width with hidden div

by brian428

HTML

<div id="calculated"></div><br>
<div id="rendered"></div><br>

<div class="container">
  <div class="my_class">Hello World</div>
</div>

<br><br>
<div style="width: 100%; border: 1px solid black;">
<span class="mimic-plotly-annotation" style="line-height: 3em;">
Symbol Legend: <span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 1 | <span style="display: inline-block; font-size: 1.5em;">◆</span> objectCodeA Dupe 1 | <span style="display: inline-block; font-size: 1.5em;">■</span> objectCodeB Dupe 1 | <span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 2 | <span style="display: inline-block; font-size: 1.5em;">◆</span> objectCodeA Dupe 2 | <span style="display: inline-block; font-size: 1.5em;">■</span> objectCodeB Dupe 2 | <span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 3 | <span style="display: inline-block; font-size: 1.5em;">◆</span> objectCodeA Dupe 3 | <span style="display: inline-block; font-size: 1.5em;">■</span> objectCodeB Dupe 3<br><span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 4 | <span style="display: inline-block; font-size: 1.5em;">◆</span> objectCodeA Dupe 4 | <span style="display: inline-block; font-size: 1.5em;">■</span> objectCodeB Dupe 4 | <span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 5 | <span style="display: inline-block; font-size: 1.5em;">◆</span> objectCodeA Dupe 5 | <span style="display: inline-block; font-size: 1.5em;">■</span> objectCodeB Dupe 5 | <span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 6 | <span style="display: inline-block; font-size: 1.5em;">◆</span> objectCodeA Dupe 6 | <span style="display: inline-block; font-size: 1.5em;">■</span> objectCodeB Dupe 6 | <span style="display: inline-block; font-size: 1.5em;">●</span> objectCodeA Dupe 7
</span>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}

.mimic-plotly-annotation {
  pointer-events: none;
  font-family: "Open Sans", verdana, arial, sans-serif;
  font-size: 12px;
  fill: rgb(0, 0, 0);
  fill-opacity: 1;
  white-space: pre;
}

.container {
  max-width: 90%;
  border: 1px solid blue;
  padding: 4px;
}

.my_class{
    font:16px Arial;
    white-space: nowrap;
    border: 1px solid green;
}

.textDimensionCalculation {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

JavaScript

function chunkString( str, n ) {
    var ret = [];
    var i;
    var len;

    for( i = 0, len = str.length; i < len; i += n ) {
       ret.push( str.substr( i, n ) )
    }

    return ret
};

function chunkSeparatedString( str, n, separator ) {
    let result = [];
    let currentChunk = "";
    
    let separatorChunks = str.split( separator );

    separatorChunks.forEach( thisChunk => {
    	if( currentChunk.length + thisChunk.length + separator.length > n ) {
      	currentChunk = currentChunk.slice( 0, -separator.length );
      	result.push( currentChunk.trim() );
        currentChunk = "";
      }
      
      currentChunk = currentChunk + thisChunk + separator;
    } );

    return result;
};

var calculateWordDimensions = function( text, availableWidth, classes ) {
    classes = classes || [];
    classes.push( "textDimensionCalculation" );

    var div = document.createElement( "div" );
    div.setAttribute( "class", classes.join(" ") );

    div.innerHTML = text;
    document.body.appendChild(div);
        
    var dimensions = {
        width : div.clientWidth,
        height : div.clientHeight,
        availableWidth: availableWidth,
        avgLetterWidthPx: Math.floor( div.clientWidth / text.length )
    };
    
    dimensions.avgLettersPerLine = Math.floor( 
    	( availableWidth / dimensions.avgLetterWidthPx ) * .95
    );
   
    console.log( dimensions );
    
    div.parentNode.removeChild(div);
    return dimensions;
};

let textString = "Tumble | Bigger | Wolverine | Lavender | Orange | Purple | Forest Green | Yellow | Navy | White | Black | Grey | Brown | Spider Man | Captain America | Tumble | Bigger | Wolverine | Lavender | Orange | Purple | Forest Green | Yellow | Navy | White | Black | Grey | Brown | Spider Man | Captain America";

let availWidth = $(".container").innerWidth();

var dimensions = calculateWordDimensions( textString, availWidth, ["my_class"] );

textString = chunkSeparatedString( textString,...