如何增加文本的高度和宽度相对于它的div

下面的代码是添加文本和回调函数来增加文本大小，但它不能正常工作。我想调整我的div和尊重文本应该随着其高度和宽度而增加。如何增加文本的高度和宽度相对于它的div

  $("<div>", { 'id' : "dyndiv" + count }) 
      .text($input.val()).addClass("draggable ui-widget-content HandleTopRowBorder").draggable({ 
       containment: '#containment-wrapper', 
       cursor: 'move', 
       delay: 200, 
       distance: 30, 
       opacity: 0.35 

      }).resizable({containment: '#containment-wrapper'}, 
           start : function(event, ui) 
             { ini_text_size_width = $(this).width(); }, 
             resize: function (event,ui) 
             { fin_text_size_width = ($(this).width()/ini_text_size_width); 
             $(this).css("font-size" ,(parseInt($(this).css("font-size")) + (fin_text_size_width)) + "pt") } }); 
    );

来源

2011-12-24 Manoj G

好吧，首先，你有一个额外的'}'和一个额外的'）'在最后。那肯定会造成问题。

$("<div>", { 'id' : "dyndiv" + count }) 
      .text($input.val()).addClass("draggable ui-widget-content HandleTopRowBorder").draggable({ 
       containment: '#containment-wrapper', 
       cursor: 'move', 
       delay: 200, 
       distance: 30, 
       opacity: 0.35 

      }).resizable({containment: '#containment-wrapper'}, 
           start : function(event, ui) 
             { ini_text_size_width = $(this).width(); }, 
             resize: function (event,ui) 
             { fin_text_size_width = ($(this).width()/ini_text_size_width); 
             $(this).css("font-size" ,(parseInt($(this).css("font-size")) + (fin_text_size_width)) + "pt") });

接下来，如果你仍然有问题，我会建议添加一些警报或console.logs到你的函数。这样你就可以清楚地知道发生了什么。

所以，你可能有这样的事情：

start : function(event, ui){ 
    ini_text_size_width = $(this).width(); 
    }, 
    resize: function (event,ui){ 
    console.log(ini_text_size_width) //This should tell you what your program thinks ini_text_size_width is at this point in time. 
    fin_text_size_width = ($(this).width()/ini_text_size_width); 
    $(this).css("font-size" ,(parseInt($(this).css("font-size")) + (fin_text_size_width)) + "pt") 
    }

然后，你应该打开你的控制台，按Command + ALT + J如果铬..或下载萤火（它绝对值得的话），右击并点击检查元素。

然后点击控制台，它应该报告你使用console.log（）。它是处理javascript，html或css时非常有用的调试工具。

编辑：

Cyberfox的回答解释了为什么字体仅增长。

你需要做的，像他解释说，是这样的：

fin_text_size_width = ($(this).width()/ini_text_size_width); 
$(this).css("font-size" ,(parseInt($(this).css("font-size"))*(fin_text_size_width)) + "pt") });

因为你要计算的百分比变化，然后由乘以当前字体大小。

我认为这应该工作。

来源

2011-12-24 07:45:18 BananaNeil

谢谢。但问题仍然存在。我会尝试你建议的工具。 – 2011-12-24 07:56:32

你能否提供它不能正常工作的方式？它是否根本不改变文本的大小？或者你只是有问题获得文本是正确的大小？ – BananaNeil 2011-12-24 13:18:02

当我尝试使用鼠标调整div的大小时，div内的文字只会增加并超出div边界。 – 2011-12-24 13:21:47

除了@ BananaNeil的笔记，containment: '#containment-wrapper'有一个超级}它终止选项对象被传递到resizeable。

而且代码：

fin_text_size_width = ($(this).width()/ini_text_size_width); 
$(this).css("font-size" ,(parseInt($(this).css("font-size")) + (fin_text_size_width)) + "pt") });

只会增加字体大小，它不会收缩它背下来，因为它是添加的字体大小。我相信你想要的是将font-size解析为一个浮点数并将其乘以比例因子。

我第二个建议让Chrome或Firebug参与其中，因为他们的开发者模式可能会很快显示出一些问题。提取并演示这个问题的示例HTML页面可能有助于获得更好的答案。

来源

2011-12-24 08:30:27 Cyberfox

如何增加文本的高度和宽度相对于它的div

回答

相关问题