Ajuster le texte à un div

Question

J'ai div avec la hauteur et la largeur fixe et à l'intérieur j'ai un texte qui change, et parfois il peut être un mot ou deux et parfois il peut être une phrase. Ce dont j'ai besoin, c'est de réduire la taille de la police afin qu'elle s'adapte à ce div.

Answer 1

i avait une idée et cela a fonctionné :) voici mon code

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

     }); 

Answer 2

Essayez de donner la taille de la police em:

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

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

Answer 3

vous pouvez le faire en définissant la taille de la police comme ......

.small {font-size: 0.8em}

vous pouvez voir l'effet ici working demo

Answer 4

J'ai eu un problème similaire, ce qui m'a fait écrire mon propre plugin pour cela. Une solution consiste à utiliser l'approche shrink-to-fit, comme décrit par user54316. Toutefois, si vous devez adapter plusieurs éléments ou si vous êtes concerné par les performances, par exemple lors du redimensionnement des fenêtres, consultez jquery-quickfit. Il mesure et calcule une mesure invariante de taille pour chaque lettre du texte et l'utilise pour calculer la prochaine taille de police qui correspond au texte dans le conteneur. Les calculs sont mis en cache, ce qui le rend très rapide (il n'y a virtuellement aucun impact sur les performances du deuxième redimensionnement avant) lorsqu'il s'agit de plusieurs textes ou d'avoir à ajuster un texte plusieurs fois, comme par exemple sur le redimensionnement de la fenêtre. Je pense que cela fonctionnerait parfaitement dans votre cas.

Vous voulez juste devez appeler

$('#yourid').quickfit() 

après avoir modifié le texte.

Production example, fitting 14x16x2 texts

Answer 5

Il y a un plugin jQuery pour que: FitText.js

Voici l'URL: https://github.com/davatron5000/FitText.js

Voici un exemple: http://jsfiddle.net/martinschaer/sRvB9/

La fonction fitText() reçoit un paramètre , avec lequel vous devez "jouer" pour obtenir les résultats que vous voulez. En outre, il a redimensionné le texte lorsque la fenêtre est redimensionnée; si vous avez besoin d'avoir le texte redimensionnée lorsque (par exemple) un div est redimensionnée, vous devez ajouter une paire de lignes JS pour cela;)

Answer 6

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

Une petite note est que vous devez appeler cette fonction si la div lui-même change de taille. Vous pouvez lier ce code à l'événement de redimensionnement de la div.