动态更改字体大小，使其适合容器内

Question

我正在尝试编写一个可以调整动态文本大小的函数，以使其永远不会溢出到其容器之外。

文本的标准大小为20px，将在CSS中设置，但是如果文本长度（动态）增加，我希望文本大小缩小以适合容器。

在我的代码中，我正在使用textContent.offsetWidth检查它是否大于容器的宽度/高度。如果是，则通过while循环减小字体大小。

语法看起来是正确的，但我认为我应该使用offsetWidth或clientWidth进行比较，因此感到困惑。

HTML：

<div id="headline-2-container" style=""> <span id="headline-2" style="">This sedfdg d f dfgdfg dfdfg fdg fdg dfg dfg dfgd fkjfkjdfngkjdfngk jndfjng </span> </div>

这是我的JS：

var textContent = document.getElementById('headline-2');
var textContainer = document.getElementById('headline-2-container');             

var divWidth = textContainer.clientWidth;
var divHeight = textContainer.clientHeight;

var contentWidth = textContent.offsetWidth;
var contentHeight = textContent.offsetHeight;

var fontSize = text.style.fontSize;
fontSize = Number(fontSize.substring(0, fontSize.length - 2));

console.log(text2);
console.log(cont2);

while (contentHeight > divHeight) {

fontSize -= 1;

text.style.color = "red";
text.style.fontSize = fontSize + "px";
}

任何对此的帮助将不胜感激。

宁愿只使用JS而不使用JQuery或任何其他库来处理此问题。

JSFiddle链接： https://jsfiddle.net/nolimit966/c4wtezyd/61/