whitespace remover for max-width

by ShaCP

HTML

<!-- <div id="container"><p>000 0</p></div> -->
<div id="width"></div>

CSS

html {
  font-size: 10rem;
  text-align: center;
  background: #fff;
 
}

/* #container {
  max-width: 2em;
} */

#width {
  width: 2.2rem;
  height: 1rem;
  background-color: lightskyblue;
}

body:not(script):not(head) {
  all: unset;
  margin: 0 auto;
  padding: 0;
  background-color: lightskyblue;
  height: 100%;
}

/* #container * {
  display: inline-block;
} */

JavaScript

var maxWidth = document.getElementById('width');
var maxWidthStyle = getComputedStyle(maxWidth);
var maxWidthSet = parseFloat(maxWidthStyle.width);
var fontSizeSet = parseFloat(maxWidthStyle['font-size']);
var fontSizeSetEM = fontSizeSet / 16;
console.log('defaultFontSize (px) =', 16)
console.log('fontSizeSet (rem) =', fontSizeSetEM);
console.log('fontSizeSet (px) =', fontSizeSet);
console.log('max-width set (rem) =', maxWidthSet / fontSizeSet);
console.log('max-width set (px) =', maxWidthSet);
console.log('max-width (px) (offsetWidth) =', maxWidth.offsetWidth);
var text = "000 0 00 0000 00000"
var words = text.split(' ');
console.log(words)
var widthContainer = document.createElement('span')
widthContainer.id = "widthContainer"
document.body.append(widthContainer);
var emptyWidth = widthContainer.offsetWidth /* if more than 0 it means there's borders, etc*/
console.log('empty width (px) =', emptyWidth, 'empty width (rem) =', emptyWidth / fontSizeSet);
widthContainer.innerHTML = '&nbsp;';
var spaceWidth = widthContainer.offsetWidth
console.log('space width (px) =', spaceWidth - emptyWidth);
for (var i = 0; i < words.length; i++) {
  widthContainer.innerHTML = words[i];
  var width = widthContainer.offsetWidth;
  console.log('word =', words[i], '- width (px) =', width - emptyWidth);
}