JavaScript Adapter le texte à l'échelle dans un Div fixe

Question

En JavaScript/jQuery, comment puis-je mettre à l'échelle une ligne de texte de longueur variable à l'intérieur d'un Div de largeur fixe de façon à ce que la ligne s'inscrive toujours à l'intérieur du Div (comme une seule ligne) ?

Merci.

Answer 1

Il s'agit en quelque sorte d'une pirouette, mais elle permet de faire ce que vous voulez.

<div id="hidden-resizer" style="visibility: hidden"></div>

Placez-le au bas de votre page, là où il ne déplacera pas les autres éléments de la page.

Alors faites ça :

var size;
var desired_width = 50;
var resizer = $("#hidden-resizer");

resizer.html("This is the text I want to resize.");

while(resizer.width() > desired_width) {
  size = parseInt(resizer.css("font-size"), 10);
  resizer.css("font-size", size - 1);
}

$("#target-location").css("font-size", size).html(resizer.html());

Answer 2

HTML :

<div class="box" style="width:700px">This is a sentence</div>
<div class="box" style="width:600px">This is a sentence</div>
<div class="box" style="width:500px">This is a sentence</div>
<div class="box" style="width:400px">This is a sentence</div>

JavaScript :

$( '.box' ).each(function ( i, box ) {

    var width = $( box ).width(),
        html = '<span style="white-space:nowrap"></span>',
        line = $( box ).wrapInner( html ).children()[ 0 ],
        n = 100;

    $( box ).css( 'font-size', n );

    while ( $( line ).width() > width ) {
        $( box ).css( 'font-size', --n );
    }

    $( box ).text( $( line ).text() );

});

Démonstration en direct : http://jsfiddle.net/e8B9j/2/show/

Enlevez "/show/" de l'URL pour voir le code.

Answer 3

J'ai écrit un plugin jQuery pour faire cela :

http://michikono.github.com/boxfit

Le plugin met le texte à l'échelle, tant horizontalement que verticalement, pour qu'il atteigne la taille maximale disponible à l'intérieur de la boîte, puis le centre.

La seule chose que vous devez faire est de définir un div avec du texte à l'intérieur :

<div id="scale">some text</div>

Et puis appelez :

$('#scale').boxfit()

La méthode acceptera certains arguments pour désactiver/activer l'habillage du texte et l'alignement centré.

Answer 4

La plupart des autres réponses utilisent une boucle pour réduire la taille de la police jusqu'à ce qu'elle tienne dans le div, ce qui est TRÈS lent puisque la page doit rendre à nouveau l'élément chaque fois que la police change de taille. J'ai finalement dû écrire mon propre algorithme pour que cet élément fonctionne d'une manière qui me permette de mettre à jour son contenu périodiquement sans geler le navigateur de l'utilisateur. J'ai ajouté quelques autres fonctionnalités (rotation du texte, ajout de rembourrage) et je l'ai packagé sous forme de plugin jQuery, que vous pouvez obtenir à l'adresse suivante :

https://github.com/DanielHoffmann/jquery-bigtext

appelez simplement

$("#text").bigText();

et il s'adaptera parfaitement à votre conteneur.

Voyez-le en action ici :

http://danielhoffmann.github.io/jquery-bigtext/

Pour l'instant, il présente quelques limitations : le div doit avoir une hauteur et une largeur fixes et il ne permet pas d'envelopper le texte sur plusieurs lignes.

Edit2 : J'ai maintenant corrigé ces problèmes et limitations et ajouté plus d'options. Vous pouvez définir la taille maximale de la police et vous pouvez également choisir de limiter la taille de la police en utilisant la largeur, la hauteur ou les deux (par défaut, les deux). Je vais travailler pour accepter les valeurs max-width et max-height dans l'élément wrapper.

Answer 5

Je ne connais pas de méthode exacte, mais voici une approximation :

var factor = 1/3;  // approximate width-to-height ratio
var div = $('#mydiv');
div.css('font-size', div.width() / (div.text().length * factor) + 'px');

Vous devrez ajuster factor en fonction de la police que vous utilisez. Le 1/3 semble fonctionner correctement pour la police Times New Roman.