JSFiddle - React, Tailwind, and code Playground

by mhouser_nowmediagroup

HTML

<div id="ploorp">ploorp</div>

CSS

div {
  width: 80%;
  max-width: 550px;
  margin: auto;
  outline: solid 1px #555;
}

JavaScript

function fit(display, hidden){
	let container_height_current = hidden.clientHeight
  hidden.style.fontSize = (parseInt(hidden.style.fontSize) + 1) + "px"
  //if(hidden.clientHeight - container_height_current == "poo")
  	//console.log("poop")
  //else{}
  	//fit(display, hidden)
	//console.log(container_height_current)
  //console.log(hidden)//.clientHeight)
}
let ploorp = document.getElementById("ploorp")

let content = ploorp.innerText
ploorp.innerText = ""

let display_container = document.createElement("span")
let hidden_container = document.createElement("span")

display_container.innerText = content
hidden_container.innerText = content
hidden_container.style.fontSize = "1px"

//hidden_container.style.opacity = 0
//hidden_container.style.visibility = "hidden"

ploorp.append(hidden_container)
fit(display_container, hidden_container)