Javascript 根据宽度调整元素中的文字大小，例如循环

我创建了JavaScript/jQuery，如下所示：

        curWidth = document.getElementById('tagPhrase').offsetHeight;
    for (i = 30; curWidth > 100; i--) {
        $('#tagPhrase').css("font-size", i);
    }

设计用于降低

#标记短语

内的字体大小，同时

#标记短语

的偏移大于100。然而，它似乎不起作用。我缺少什么？

试试这个：

Html:

<p id="tagPhrase" style="font-size:50px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</p>

var element = document.getElementById('tagPhrase'), 
    curWidth = element.offsetWidth,
  currentFontSize = parseInt(element.style.fontSize);

while(curWidth > 100 && currentFontSize > 2) {
    currentFontSize--;
  element.style.fontSize = currentFontSize+"px";
  curWidth = element.offsetWidth;
}

演示：

<p id="tagPhrase" style="font-size:50px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</p>

var element = document.getElementById('tagPhrase'), 
    curWidth = element.offsetWidth,
  currentFontSize = parseInt(element.style.fontSize);

while(curWidth > 100 && currentFontSize > 2) {
    currentFontSize--;
  element.style.fontSize = currentFontSize+"px";
  curWidth = element.offsetWidth;
}

---

请为（i=30；curWidth>100；i-）解释一下！！！我想要的是I=30，当前offsetWidth大于100，从I（字体大小）中减去，直到offsetWidth不再大于100。这是可行的，但我希望字体足够小，以适合100px区域，而不是字体大小2。我能做些什么改变来做到这一点？你说的合适，是指一行吗？！因为它总是合身的！是的，一行。我该怎么做？容器有一个固定的宽度（100px）和动态文本！你想让文本显示在一行上？！