JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div class="flowContent flowFreeText flowLayoutMovable flowAlignTarget svgTestHtml" style="left: 72px; top: 72px; width: 9px; height: 9px; position: absolute;"><div class="flowTextEditor" id="flowTextundefined" style="font-size: 14.4pt;"><span style="font-size:19.98513011152416pt;"><strong style="color:rgb(255, 215, 0); font-size:22.7945205479452pt">Rosenwald Elementary School<br><span style="font-size:17.130111524163567pt;">​2015 - 2016</span><br></strong></span></div></div>

JavaScript

getLineWraps.call($('html body div.flowContent.flowFreeText.flowLayoutMovable.flowAlignTarget.svgTestHtml div#flowTextundefined.flowTextEditor span strong span')[0].childNodes[0], true);

function getLineWraps(debug) {
	// Check if there is a possibility for word wrap
	var text = this.textContent;
	var words = text.split(/\s|\u200B/g);
	if(words.length <= 1) {
		return [text];
	}

	// Replace the existing text node with <span>'s which will auto wrap
	var spans = [], spaceSpans = [];
	var parentNode = this.parentNode;
	for(var i = 0; i < words.length; i++) {
		// Need to check word wrapping on empty spans for word<br> word in small manually sized area case
		var span = document.createElement('span');
		if(words[i]) {
			span.textContent = words[i];
      
      var startHeight = parentNode.getBoundingClientRect().top;
			parentNode.insertBefore(span, this);
      var endHeight = parentNode.getBoundingClientRect().top;
      var heightDiff = startHeight - endHeight
      if(heightDiff > 0) {
      	computedStyle = window.getComputedStyle(parentNode);
				fontSize = parseFloat(computedStyle.fontSize);
        
        if(heightDiff >= fontSize) {
        	var br = document.createElement('br');
          spans.push(br);
        	parentNode.insertBefore(br, span);
        }
      }

			if(i < words.length - 1) {
				var spaceSpan = document.createTextNode(' ');
				parentNode.insertBefore(spaceSpan, this);
				spaceSpans.push(spaceSpan);
			}
		} else {
			span.textContent = ' ';
			parentNode.insertBefore(span, this);
		}
		spans.push(span);
	}

	// Remove this text node from parent
	parentNode.removeChild(this);
	// console.log(words);

	// Detect when y increases in a span -> word wrap
	var currentTop = -1;
	var currentLine = null;
	var lines = [];
	var parentOffsetTop = parentNode.getBoundingClientRect().top;
	for(var i = 0; i < spans.length; i++) {
		var span = spans[i];
    if(span.nodeName.toLowerCase() == 'br') {
    	if(currentLine) {
     ...