如何增加文本的高度和寬度相對於它的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

回答

相關問題