texte taille de police automatique

Question

J'ai une balise div pour un titre, comme ci-dessous, il peut être multi ligné et je voudrais que le texte soit aussi grand que possible pour s'adapter parfaitement dans la boîte. Merci pour vos idées.

<div id="main" style="width:700px; height:165px; float:left; font-size:50px; text-align:center; font-family:Chiller;"><?php echo $title ?></div> 

Answer 1

J'ai gagné » Je le code pour vous, mais je suis sûr que vous pourriez le faire avec javascript ou jQuery. Vous voudriez définir la propriété de débordement de la div que vous avez codée là. Et vous voudriez créer un div séparé pour le texte du titre dans le div que vous avez déjà. Ensuite, avec javascript, vous pouvez vérifier si la hauteur de la div interne est supérieure à la hauteur de la div externe. Je ne l'ai pas essayé, mais quelque chose comme ceci:

<div id="main" style="width:700px; height:165px; float:left; font-size:50px; text-align:center; font-family:Chiller; overflow:hidden;"> 
    <div id="title"> 
     <?php echo $title ?> 
    </div> 
</div> 

Ensuite, dans le javascript que vous vérifiez juste pour voir si la hauteur ou la largeur du titre est supérieure à la hauteur ou la largeur principale. Si c'est le cas, diminuez la taille de la police et vérifiez à nouveau jusqu'à ce que cela corresponde. Je cacherais probablement le div de titre jusqu'à ce que j'obtienne la bonne taille de police.

Cet article pourrait aider aussi: http://objectmix.com/javascript/112045-check-overflow-div.html

Answer 2

Je n'ai pas le temps de le tester, mais je trouve ces deux liens qui pourraient vous aider:

auto resize text (font size) when resizing window?

et

http://icodesnip.com/snippet/jquery/jquery-automatic-text-resize