如何使用其大小增加div内的文本

时间:2011-12-22 10:54:02

标签: javascript jquery

我在容器div中添加了多个动态div。每个div包含文本。它的工作正常。但是当我使用jquery库向div添加可调整大小的功能时。我可以调整div的大小,但它的文本大小是静态的。当我增加div大小时,我想要的文本大小也应该增加,反之亦然。

以下是我添加可调整大小功能并附加到父级的代码。

          var div = document.createElement('div');
           $(div).attr("id", "dyndiv" + count); 
           objid = "dyndiv" + count ;
           count++;
      var $ctrl = $(div).text($('#txttext').val()).addClass("draggable ui-widget-content").draggable({ containment: '#containment-wrapper', cursor: 'move', snap: '#containment-wrapper' }).resizable({ aspectRatio:true, containment: '#containment-wrapper' }); 

            $("#containment-wrapper").append($ctrl); 

1 个答案:

答案 0 :(得分:1)

下面是一个我的意思的例子,你可能需要弄乱计算虽然包括高度一些如何现在你可以有一个小高度,但一个大文本不完全适合在框中。

http://jsfiddle.net/HpSwu/1/

$( ".selector" ).resizable({
    resize: function(event, ui) {
       newSize = $(this).width()*0.1;
       $(this).css('font-size', newSize );
    }
});

修改

类似的东西:

var $ctrl = $(div).text($('#txttext').val())
            .addClass("draggable ui-widget-content")
            .draggable({ 
                 containment: '#containment-wrapper', 
                 cursor: 'move', 
                 snap: '#containment-wrapper' })
            .resizable({ 
                  aspectRatio:true, 
                  containment: '#containment-wrapper',
                  resize: function(event, ui) {
                     newSize = $(this).width()*0.1;
                     $(this).css('font-size', newSize );
                  }
            });