Jquery 如何增加文本相对于其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") } });   
     );       

$（“”，{'id'：“dyndiv”+count}）
.text（$input.val（））.addClass（“可拖动的ui小部件内容HandleTopRowBorder”）.draggable（{
安全壳：“#安全壳包装器”，
光标：“移动”，
延误：200，
距离:30,，
不透明度：0.35
}).可调整大小（{containment:'#containment wrapper'}，
开始：功能（事件、用户界面）
{ini_text_size_width=$（this）.width（）；}，
调整大小：函数（事件、ui）
{fin_text_size_width=（$（this）.width（）/ini_text_size_width）；
$（this.css（“字体大小”），（parseInt（$（this.css（“字体大小”））+（fin_text_size_width））+“pt”）}）；
);       

首先，在结尾处有一个额外的“}”和一个额外的“'）。这肯定会引起一个问题

$("<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") });

然后，你应该打开你的控制台，如果在chrome中点击command+alt+j。。或者下载firebug（绝对值得），右键单击并点击inspect元素

然后单击console，它应该报告您曾经使用过的console.log（）。在处理javascript、html或css时，它是一个非常有用的调试工具

---

编辑：

赛博福克斯的回答解释了为什么字体只在增长

正如他所解释的，你需要做的是：

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

因为您要计算百分比变化，然后将当前字体大小乘以百分比变化

---

我认为这应该行。

好吧，首先，你有一个额外的“}”和一个额外的“'）结尾。这肯定会引起一个问题

$("<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") });

然后，你应该打开你的控制台，如果在chrome中点击command+alt+j。。或者下载firebug（绝对值得），右键单击并点击inspect元素

然后单击console，它应该报告您曾经使用过的console.log（）。在处理javascript、html或css时，它是一个非常有用的调试工具

---

编辑：

赛博福克斯的回答解释了为什么字体只在增长

正如他所解释的，你需要做的是：

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

因为您要计算百分比变化，然后将当前字体大小乘以百分比变化

---

我认为这应该行得通。

除了@BananaNeil的注释外，

包容：“#包容包装器”

还有一个superflous

}

可以终止传递给

可调整大小的

的选项对象

进一步修订守则：

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

只会增加字体大小，不会缩小，因为它会增加字体大小。我相信您想要的是将

字体大小

解析为浮点数，并将其与比例因子相乘

---

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

除了@BananaNeil的注释外，

包含：“#包含包装器”

还有一个superflous

}

可以终止传递给

可调整大小的
的选项对象

进一步修订守则：

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

只会增加字体大小，不会缩小，因为它会增加字体大小。我相信您想要的是将
字体大小
解析为浮点数，并将其与比例因子相乘

我支持让Chrome或Firebug参与进来的建议，因为他们的开发模式可能会很快显示出一些问题。提取并演示此问题的示例HTML页面可能有助于获得更好的答案。
谢谢。但问题仍然存在。我将试用您建议的工具。您能否提供它无法正常工作的方式？它根本不改变文本的大小吗？或者您只是在将文本设置为正确大小方面遇到了问题？当我尝试用鼠标调整div大小时，div内的文本只会增加并超出div边界。我编辑了我的响应以帮助您完成此操作。试试看，谢谢。但问题仍然存在。我将试用您建议的工具。您能否提供它无法正常工作的方式？它根本不改变文本的大小吗？或者您只是在将文本设置为正确大小方面遇到了问题？当我尝试用鼠标调整div大小时，div内的文本只会增加并超出div边界。我编辑了我的响应以帮助您完成此操作。试试看。