Javascript 当文本符合其所在框的边界时，停止增加字体大小

我正在使用滑块增大或减小

中文本的字体大小

我想做的是，当

中的文本碰到封闭的

边缘时，使用jQuery阻止滑块增大字体大小

这是我用来通过滑块调整字体大小的JavaScript

$( function() {
    var handle = $( "#custom-handle-bottom" );
    $( "#fontsliderbottom" ).slider({
        value:current_bottom_font_size,
        min: 0,
        max: 70,
        step: 1,
        create: function() {
            handle.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle.text( ui.value );

            $('.lowertext').css('font-size', ui.value+'px');

        }
    });
});

---

因此，可能有一些代码确定

td.lowertext

中的文本是否与

td.lowertext

的宽度相同或更宽？

要读取div中文本的大小，可以使用

offsetWidth

元素属性（还需要在css中设置

max width

，以避免自动调整td元素的大小）

var s=120，fid=setInterval（x=>
{ 
如果（box.offsetWidth>text.offsetWidth）{
text.style.fontSize=（++s/10）+'px'；
}否则{
清除间隔（fid）；
}
}，10）

#框{最大宽度：200px；宽度：200px；高度：80px；背景：黄色；}
#文本{空白：nowrap；}

related，如果不是dupe:@kaido不认为这是一个dupe，但肯定很有趣。可能仍然可以使用它，但无法完成我试图完成的任务。@kaido建议的链接作为一个复制品工作得非常好，在您尝试之后，如果它仍然不能满足您的要求，请返回您尝试过的内容并发布一个新问题。现在您也得到了答案，所以有很多选择。试试这个：因为它被标记为dupe，所以不能在这里添加答案使用visible元素是非常危险的。如果有一天他们决定将此元素设置为具有最大宽度的块或内联块。最好使用代码完全控制的伪元素，并直接搜索最大值。