適合文本到div

我有固定高度和寬度的div，裏面有一個正在改變的文本，有時它可以是一兩個字，有時它可以是一個句子。我需要的是縮小字體大小，以適應該div。適合文本到div

2010-12-15 kljuco

你在div中有一個等寬字體嗎？ – 2010-12-15 11:17:33

你應該檢查我的答案，以獲得更好的性能 – Hoffmann 2012-11-15 11:38:19

我有一個想法，它的工作:)這裏是我的代碼

 $('li').each(function() { 
      while ($(this).outerHeight() > 25) { 
       var currentFontSize = $(this).css("font-size"); 
       $(this).css("font-size", (parseFloat(currentFontSize) - 1) + "px"); 
      } 

     });

來源

2010-12-15 11:51:15 kljuco

+1 我有問題獲取寬度的文本被div封裝在一個明確的寬度。我用這個解決方案 - > http://stackoverflow.com/a/2771544/374866 – davehale23 2012-05-07 19:35:50

我不得不說這個函數太慢了。改變css屬性會導致dom的重繪。如果您需要調整大量元素或定時器的大小，它會阻止您的網頁。請檢查我的答案，以獲得更高效但仍然簡單的解決方案 – Hoffmann 2012-11-15 11:35:20

嘗試在EM給出字體大小：

http://clagnut.com/blog/348/

http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

來源

2010-12-15 11:19:53 Catalin

-2

您可以通過定義字體大小一樣做......

.small {font-size: 0.8em}

你可以在這裏看到效果working demo

來源

2010-12-15 11:20:04 Vivek

我有一個類似的問題，這讓我寫我自己的這個插件。一種解決方案是使用縮小到適合的方法，如user54316所述。但是，如果您必須適合多個項目或關注性能，例如在窗口大小調整上，請查看jquery-quickfit。

它爲文本的每個字母測量和計算尺寸不變尺寸以適合並使用它來計算適合文本到容器中的下一個最佳字體尺寸。

當處理多個文本或不得不多次調整文本時，例如在窗口大小調整時，緩存計算會使速度非常快（從第二次調整大小向前，幾乎沒有性能影響）。我認爲它會在你的情況下完美。

你只需要調用

$('#yourid').quickfit()

您更改後的文字。

Production example, fitting 14x16x2 texts

來源

2012-04-09 06:56:09

有一個jQuery插件爲：FitText.js

這裏的網址：https://github.com/davatron5000/FitText.js

下面是一個例子：http://jsfiddle.net/martinschaer/sRvB9/

函數fitText（）接收的參數，你需要「玩」才能獲得你想要的結果。此外，調整窗口大小時調整文本大小;如果你需要有當（例如）一個div被調整大小的文字，你應該增加對JS線是什麼;）

來源

2012-06-20 16:21:41

這是爲了調整窗口大小，但不允許較長的字符串縮小以適合div內部。 – Smittles 2012-08-23 18:05:40

$text.css('font-size', "100px"); 
$text.css('line-height', "100px"); 
var foo= $div.width() /$text.width(); 
var bar= $div.height() /$text.height(); 

if(foo < bar) { 
    foo=Math.floor(foo*100) +"px"; 
    $text.css('font-size', foo); 
    $text.css('line-height', foo); 
} else { 
    bar=Math.floor(bar*100) +"px"; 
    $text.css('font-size', bar); 
    $text.css('line-height', bar); 
} 

//centralizing text, top and left are defined as 50% on the CSS, optional 
$text.css('margin-left', -$text.width() /2 + "px"); 
$text.css('margin-top', -$text.height() /2 + "px");

一個小提醒的是，你需要調用這個函數，如果div本身改變大小。您可以將此代碼綁定到div的resize事件。

來源

2012-11-15 11:37:44 Hoffmann

適合文本到div

回答

相關問題