JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="teste"></div>

CSS

#teste {
  width: 200px;
  /* height: 50px; */
  background-color: #deeef2;
  border: 1px solid black;
  box-sizing: border-box;  
}

JavaScript

function _(name) {
  return document.querySelector(name);
}

function px(pixels) {
  return pixels + "px"
}

function getHeight(element) {
  return element.getBoundingClientRect().height
}

function getWidth(element) {
  return element.getBoundingClientRect().width
}


function css(element, key, value) {
  if (key instanceof Object) {
    for (var objKey in key) {
      element.style[objKey] = key[objKey];
    }
  } else {
    if (value) {
      element.style[key] = value;
      return element
    } else {
      return window.getComputedStyle(element, null).getPropertyValue(key);
    }
  }
}


function fitText(_el, text, obj) {

  var element = _el;
  var height = element.offsetHeight;
  var width = element.offsetWidth;

  var textElement = document.createElement('span');
  // var txt = document.createTextNode(text);
  textElement.innerHTML = text;
  element.appendChild(textElement);

  var FontSize =0;

  while (textElement.offsetWidth < width) {
    element.style.fontSize = ++FontSize + 'px';
  }
  while (textElement.offsetHeight > height) {
    element.style.fontSize = ++FontSize + 'px';
  }
  return element;
}



var text = "compre agora mesmo, e aproveite ofertas imperdiveis"

fitText(_("#teste"), text, {
		
})