Redimensionner dynamiquement le texte pour remplir div

J'ai été à la recherche d'une solution pour redimensionner la taille du texte dans un div pour faire le texte remplir toute la hauteur div et la largeur, sans succès.Redimensionner dynamiquement le texte pour remplir div

J'ai fait quelques images pour aider à comprendre ce problème: Div 1

Donc, c'est un simple div avec une hauteur et une largeur ensemble. Cette hauteur et cette largeur ne changent pas, le texte dans la boîte le fait! Donc ce que je veux faire est de faire en sorte que ce texte remplisse toute la largeur et la hauteur de la div comme dans l'image ci-dessous.

Div 2

Je travaille sur l'exemple simple ci-dessous et je ne peux tout simplement pas savoir comment faire cela. J'ai essayé de définir des tailles de police relatives avec le pourcentage, faire des choses avec débordement, alignant le texte tout ne me donnant pas le résultat que je veux.

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
      #box1, #box2{ 
       width: 400px; 
       height: 300px; 
       color: white; 
       margin: 10; 
       font-size:larger; 
       text-align:justify; 
       letter-spacing: 100%; 
      } 

      #box1 { background-color: green;} 
      #box2 { background-color: blue;} 
     </style> 
    </head> 

    <body> 
     <div id="box1"> 
      Llorem ipsum foo bar baz 
     </div> 
     <div id="box2"> 
      Foobar 
     </div> 
    </body> 
</html>

Est-ce problème, même avec CSS résoluble simple, ou ce que je dois faire un peu de javascript/jQuery?

Source

2010-12-06 Cheesebaron

Comme je l'ai dit cela peut être dupe de

Auto-size dynamic text to fill fixed size container.

L'OP ne jQuery plugin un pour cela signifie, vous pouvez le télécharger here

Il ne semble pas à jour si !

Bonne chance!

Source

2010-12-06 21:25:53 Trufa

Oui, cela semble être la solution au problème, semble fonctionner avec Chrome au moins, devra tester dans d'autres navigateurs. – Cheesebaron

Bonne chance, je suis moi aussi chrome donc je ne peux pas vous aider là-bas. S'il vous plaît dites-moi si vous avez un problème de mise en œuvre! – Trufa

Les liens sont rompus.s'il vous plaît coller le code directement – ngb

Je pense que ce n'est pas le genre de choses que vous pouvez faire avec CSS. Il n'y a aucune sorte de notion de pourcentage dans les polices (pour autant que je sache). Vous aurez probablement besoin d'utiliser Javascript.

Source

2010-12-06 21:15:22 warriorpostman

Le pourcentage de polices est possible. 100% sera la taille définie dans les paramètres de votre navigateur tout ce qui est au-dessus ou au-dessous de 100% sera redimensionné en fonction de la taille de la police. – Cheesebaron

Vous pouvez utiliser FitText.js (github page) pour résoudre ce problème. Est vraiment petit et efficace par rapport à TextFill. TextFill utilise une boucle while coûteuse et FitText ne le fait pas.

Aussi FitText est plus flexible (je l'utilise dans un projet avec des exigences très spéciales et fonctionne comme un champion!).

HTML:

<div class="container"> 
    <h1 id="responsive_headline">Your fancy title</h1> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="jquery.fittext.js"></script> 
<script> 
    jQuery("#responsive_headline").fitText(); 
</script>

Vous pouvez également définir des options qui lui sont:

<script> 
    jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'}); 
</script>

CSS:

#responsive_headline { 
    width: 100%; 
    display: block; 
}

Et si vous en avez besoin, FitText dispose également d'un no-jQuery version.

Source

2013-09-20 08:06:21 eduludi

Ce n'est pas ce que le demandeur a demandé. FitText permet simplement un redimensionnement basé sur le ratio; le demandeur a demandé que le texte soit redimensionné afin qu'il remplisse complètement le div (comme dans, vous ne pouviez pas augmenter la taille de police: plus de caractères hors de la div). –

Redimensionner dynamiquement le texte pour remplir div

Répondre

Questions connexes