如何根据的变化重新调整不断变化的文本大小以适应具有固定宽度的div？

So I have text that changes whenever a specific <select> is changed to a different option. I need to make this text change font-size based on if it flows to the outside of the div. Here's what I have so far:

因此,只要特定的

var autoAdjust = {
    init:function(){
        var eObject = document.getElementById('select');
        eObject.on( "change", autoAdjust.task );
    },
    task:function(){
        var divWidth = jQuery(".containerDiv").width();
        var text = document.getElementById("text");
        var fontSize = 16;

        while (text.width() > divWidth){
            text.css("font-size", fontSize -= 0.5);
        }
    }
}
autoAdjust.init();

Here's the CSS:

这是CSS:

/* This makes it so you can measure the text width */
#text{
    white-space:nowrap;
    display: inline-block;
}

How would I make this work?? I feel like I'm over complicating it.

我怎么做这个工作?我觉得我太复杂了。

2 个解决方案

#1

The text variable contains a javascript dom object, not a jQuery object. This matters because .text() and .css() are both jQuery methods and do not work (are undefined) on plain dom objects. Your code should function correctly like so:

text变量包含一个javascript dom对象,而不是一个jQuery对象。这很重要,因为.text()和.css()都是jQuery方法,在普通的dom对象上不起作用(未定义)。你的代码应该正常运行如下:

var autoAdjust = {
    init:function(){
        var eObject = jQuery('select');
        eObject.on( "change", autoAdjust.task );
    },
    task:function(){
        var divWidth = jQuery(".containerDiv").width();
        var text = jQuery("#text");
        var fontSize = 16;

        while (text.width() > divWidth){
            text.css("font-size", "-=0.5");
        }
    }
}
autoAdjust.init();

#2

Shooting from the hip here, but it looks like there are a couple problems with the snippet.

这里从臀部拍摄,但看起来片段有几个问题。

Dom elements don't natively support the "on" method. You'll need to use a library selector to get "on" support (ie jQuery, etc)

Dom元素本身不支持“on”方法。您需要使用库选择器来获得“on”支持(即jQuery等)

You need to specify the unit type to increase/decrease font size.

您需要指定单位类型以增加/减少字体大小。

See snippet with suggested edits (untested, but the spirit of the edits are evident)

查看带有建议编辑的代码段(未经测试,但编辑精神很明显)

<select id="MySelect">
...
</select>

<div class="containerDiv">
   <span id="MyText"></span>
</div>

<script type="text/javascript">
    var autoAdjust = {
        init:function(){
            var eObject = $("#MySelect");              // jQuery selector (using ID)
            eObject.on( "change", autoAdjust.task );
        },
        task:function(){
            var divWidth = $(".containerDiv").width(); // jQuery selector (using class)
            var text     = $("#MyText");               // jQuery selector (using ID)
            var fontSize = 16;

            while (text.width() > divWidth){
                text.css("font-size", (fontSize -= 0.5) + "px"); // specify units
            }
        }
    }
    autoAdjust.init();
</script>

#1

var autoAdjust = {
    init:function(){
        var eObject = jQuery('select');
        eObject.on( "change", autoAdjust.task );
    },
    task:function(){
        var divWidth = jQuery(".containerDiv").width();
        var text = jQuery("#text");
        var fontSize = 16;

        while (text.width() > divWidth){
            text.css("font-size", "-=0.5");
        }
    }
}
autoAdjust.init();

#2