Texte dynamique de taille automatique pour remplir un conteneur de taille fixe
J'ai besoin d'afficher le texte entré par l'utilisateur dans une div de taille fixe. Ce que je veux, c'est que la taille de la police soit automatiquement ajustée pour que le texte remplisse la boîte autant que possible.
Donc-si le div est 400px x 300px. Si quelqu'un entre ABC alors c'est vraiment une grande police. Si ils entrent dans un paragraphe, alors ce serait une petite police.
Je voudrais probablement commencer avec une taille de police maximale - peut-être 32px, et alors que le texte est trop grand pour s'adapter au conteneur, réduisez la taille de la police jusqu'à ce qu'il équiper.
18 réponses
Merci Attaque . Je voulais utiliser jQuery.
Vous m'a orienté dans la bonne direction, et c'est ce que j'ai:
Voici un lien pour le plugin: https://plugins.jquery.com/textfill/
Et un lien vers la source: http://jquery-textfill.github.io/
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
Et mon html est comme ceci
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
C'est mon premier plugin jquery, donc c'est probablement pas aussi bon qu'il devrait l'être. Les pointeurs sont certainement les bienvenus.
Je n'ai trouvé aucune des solutions précédentes suffisamment adéquate en raison de mauvaises performances, donc j'ai fait la mienne qui utilise des mathématiques simples au lieu de boucler. Devrait fonctionner correctement dans tous les navigateurs.
Selon ce cas de test de performance c'est beaucoup plus rapide que les autres solutions trouvées ici.
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier-0.1));
ourText.css(
"fontSize",
(maxFontSize > 0 && newSize > maxFontSize) ?
maxFontSize :
newSize
);
});
};
})(jQuery);
Si vous voulez contribuer, j'ai ajouté cela Gist.
La plupart des autres réponses utilisent une boucle pour réduire la taille de la police jusqu'à ce qu'elle corresponde à la div, c'est très lent car 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 le faire fonctionner d'une manière qui m'a permis de mettre à jour son contenu périodiquement sans geler le navigateur de l'utilisateur. J'ai ajouté d'autres fonctionnalités (Rotation du texte, Ajout de remplissage) et l'ai emballé comme un plugin jQuery, vous pouvez l'obtenir à:
Https://github.com/DanielHoffmann/jquery-bigtext
Appelez Simplement
$("#text").bigText();
Et il s'adaptera bien sur votre conteneur.
Voir en action ici:
Http://danielhoffmann.github.io/jquery-bigtext/
Pour l'instant, il a quelques limitations, le div doit avoir une hauteur et une largeur fixes et il ne prend pas en charge l'emballage du texte en plusieurs lignes.
Je vais travailler sur l'obtention d'une option pour définir la taille de police maximale.
Modifier: J'ai trouvé d'autres problèmes avec le plugin, il ne gère pas d'autre modèle de boîte que le modèle standard et le div ne peut pas avoir de marges ou de bordures. Je vais travailler sur ça.
Edit2: j'ai maintenant corrigé ces problèmes et limitations et ajouté plus d'options. Vous pouvez définir la taille de police maximale et vous pouvez également choisir de limiter la taille de police en utilisant la largeur, la hauteur ou les deux. Je vais travailler à accepter des valeurs max-width et max-height dans l'élément wrapper.
Edit3: j'ai mis à jour le plugin à la version 1.2.0. Nettoyage majeur du code et de nouvelles options (verticalAlign, horizontalAlign, textAlign) et prise en charge des éléments internes à l'intérieur de la balise span (comme les sauts de ligne ou les icônes font-awesome.)
Autant que j'aime les upvotes occasionnels que je reçois pour cette réponse (merci!), ce n'est vraiment pas la plus grande approche de ce problème. Veuillez consulter quelques-unes des autres réponses merveilleuses ici, en particulier celles qui ont trouvé des solutions sans boucler.
Pourtant, pour des raisons de référence, voici ma réponse originale :
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>
Et voici une version avec les classes:
<html>
<head>
<style type="text/css">
.dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textDivs = document.getElementsByClassName("dynamicDiv");
var textDivsLength = textDivs.length;
// Loop through all of the dynamic divs on the page
for(var i=0; i<textDivsLength; i++) {
var textDiv = textDivs[i];
// Loop through all of the dynamic spans within the div
var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];
// Use the same looping logic as before
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
}
</script>
</head>
<body onload="shrink()">
<div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>
Ceci est basé sur ce que GeekyMonkey a posté ci-dessus, avec quelques modifications.
; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter (WebDesign@GeekyMonkey.com)
* @version 0.2
*/
$.fn.textfill = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// use the combined height of all children, eg. multiple <p> elements.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
})(jQuery);
J'ai créé une directive pour AngularJS-heavely inspirée par la réponse de GeekyMonkey mais sans la dépendance jQuery.
Démo: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview
Markup
<div class="fittext" max-font-size="50" text="Your text goes here..."></div>
La Directive
app.directive('fittext', function() {
return {
scope: {
minFontSize: '@',
maxFontSize: '@',
text: '='
},
restrict: 'C',
transclude: true,
template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
controller: function($scope, $element, $attrs) {
var fontSize = $scope.maxFontSize || 50;
var minFontSize = $scope.minFontSize || 8;
// text container
var textContainer = $element[0].querySelector('.textContainer');
angular.element(textContainer).css('word-wrap', 'break-word');
// max dimensions for text container
var maxHeight = $element[0].offsetHeight;
var maxWidth = $element[0].offsetWidth;
var textContainerHeight;
var textContainerWidth;
var resizeText = function(){
do {
// set new font size and determine resulting dimensions
textContainer.style.fontSize = fontSize + 'px';
textContainerHeight = textContainer.offsetHeight;
textContainerWidth = textContainer.offsetWidth;
// shrink font size
var ratioHeight = Math.floor(textContainerHeight / maxHeight);
var ratioWidth = Math.floor(textContainerWidth / maxWidth);
var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
fontSize -= shrinkFactor;
} while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);
};
// watch for changes to text
$scope.$watch('text', function(newText, oldText){
if(newText === undefined) return;
// text was deleted
if(oldText !== undefined && newText.length < oldText.length){
fontSize = $scope.maxFontSize;
}
resizeText();
});
}
};
});
Voici une méthode de bouclage améliorée qui utilise la recherche binaire pour trouver la plus grande taille possible qui correspond au parent dans le moins d'étapes possible (c'est plus rapide et plus précis que le pas par une taille de police fixe). Le code est également optimisé de plusieurs façons pour les performances.
Par défaut, 10 étapes de recherche binaire seront effectuées, ce qui atteindra 0,1% de la taille optimale. Vous pouvez plutôt définir numIter à une valeur N pour obtenir dans 1/2^N de l'optimal taille.
Appelez-le avec un sélecteur CSS, par exemple: fitToParent('.title-span');
/**
* Fit all elements matching a given CSS selector to their parent elements'
* width and height, by adjusting the font-size attribute to be as large as
* possible. Uses binary search.
*/
var fitToParent = function(selector) {
var numIter = 10; // Number of binary search iterations
var regexp = /\d+(\.\d+)?/;
var fontSize = function(elem) {
var match = elem.css('font-size').match(regexp);
var size = match == null ? 16 : parseFloat(match[0]);
return isNaN(size) ? 16 : size;
}
$(selector).each(function() {
var elem = $(this);
var parentWidth = elem.parent().width();
var parentHeight = elem.parent().height();
if (elem.width() > parentWidth || elem.height() > parentHeight) {
var maxSize = fontSize(elem), minSize = 0.1;
for (var i = 0; i < numIter; i++) {
var currSize = (minSize + maxSize) / 2;
elem.css('font-size', currSize);
if (elem.width() > parentWidth || elem.height() > parentHeight) {
maxSize = currSize;
} else {
minSize = currSize;
}
}
elem.css('font-size', minSize);
}
});
};
J'ai bifurqué le script ci-dessus de Marcus Ekwall: https://gist.github.com/3945316 et l'a modifié à mes préférences, il se déclenche maintenant lorsque la fenêtre est redimensionnée, de sorte que l'enfant s'adapte toujours à son conteneur. J'ai collé le script ci-dessous pour référence.
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this);
function resizefont(){
var parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier));
ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
}
$(window).resize(function(){
resizefont();
});
resizefont();
});
};
})(jQuery);
Voici ma modification de la réponse de L'OP.
En bref, beaucoup de gens qui ont essayé d'optimiser cela se sont plaints qu'une boucle était utilisée. Oui, alors que les boucles peuvent être lentes, d'autres approches peuvent être inexactes.
Par conséquent, mon approche utilise Binary Search pour trouver la meilleure taille de police:
$.fn.textfill = function()
{
var self = $(this);
var parent = self.parent();
var attr = self.attr('max-font-size');
var maxFontSize = parseInt(attr, 10);
var unit = attr.replace(maxFontSize, "");
var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
var fontSize = (maxFontSize + minFontSize) / 2;
var maxHeight = parent.height();
var maxWidth = parent.width();
var textHeight;
var textWidth;
do
{
self.css('font-size', fontSize + unit);
textHeight = self.height();
textWidth = self.width();
if(textHeight > maxHeight || textWidth > maxWidth)
{
maxFontSize = fontSize;
fontSize = Math.floor((fontSize + minFontSize) / 2);
}
else if(textHeight < maxHeight || textWidth < maxWidth)
{
minFontSize = fontSize;
fontSize = Math.floor((fontSize + maxFontSize) / 2);
}
else
break;
}
while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);
self.css('font-size', fontSize + unit);
return this;
}
function resizeText()
{
$(".textfill").textfill();
}
$(document).ready(resizeText);
$(window).resize(resizeText);
Cela permet également à l'élément de spécifier la police minimale et maximale:
<div class="container">
<div class="textfill" min-font-size="10px" max-font-size="72px">
Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
</div>
</div>
De plus, cet algorithme est sans unité. Vous pouvez spécifier em, rem, %, etc. et il utilisera cela pour son résultat final.
Voici le Violon: https://jsfiddle.net/fkhqhnqe/1/
, j'ai eu exactement le même problème avec mon site web. J'ai une page qui s'affiche sur un projecteur, sur des murs, de grands écrans..
Comme je ne connais pas la taille maximale de ma police, j'ai réutilisé le plugin ci-dessus de @GeekMonkey mais en incrémentant la fontsize:
$.fn.textfill = function(options) {
var defaults = { innerTag: 'span', padding: '10' };
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var ourText = $(Opts.innerTag + ':visible:first', this);
var fontSize = parseFloat(ourText.css('font-size'),10);
var doNotTrepass = $(this).height()-2*Opts.padding ;
var textHeight;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
fontSize = fontSize + 2;
} while (textHeight < doNotTrepass );
});
};
Voici une version de la réponse acceptée qui peut également prendre un paramètre minFontSize.
(function($) {
/**
* Resizes an inner element's font so that the inner element completely fills the outer element.
* @author Russ Painter WebDesign@GeekyMonkey.com
* @author Blake Robertson
* @version 0.2 -- Modified it so a min font parameter can be specified.
*
* @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
* @return All outer elements processed
* @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
*/
$.fn.textfill = function(options) {
var defaults = {
maxFontPixels: 40,
minFontPixels: 10,
innerTag: 'span'
};
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var fontSize = Opts.maxFontPixels;
var ourText = $(Opts.innerTag + ':visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > Opts.minFontPixels);
});
};
})(jQuery);
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 souple (je l'utilise dans un proyect avec des exigences 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:
<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 a également un no-jQuery version .
EDIT: ce code a été utilisé pour afficher des notes sur une vidéo HTML5. Il change la taille de police à la volée lorsque la vidéo est redimensionnée (lorsque la fenêtre du navigateur est redimensionnée.) Les notes étaient connectées à la vidéo (tout comme les notes sur YouTube), c'est pourquoi le code utilise directement des instances au lieu d'un handle DOM.
Selon la demande, je vais ajouter du code que j'ai utilisé pour y parvenir. (Zones de texte sur une vidéo HTML5.) Le code a été écrit il y a longtemps, et je pense franchement que c'est joli salissant. Puisque la question est déjà répondue et qu'une réponse est déjà acceptée il y a longtemps, Je ne prends pas la peine de réécrire ceci. Mais si quelqu'un veut simplifier un peu, vous êtes les bienvenus!
// Figure out the text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
/* By analysing some functions with regression, the resulting function that
gives the best font size with respect to the number of letters and the size
of the note is:
g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
f(x) = g(letters) * (x / 1000)^0.5
Font size = f(size)
*/
return 8.3 - 2.75 * Math.pow(x, 0.15);
};
var findFontSize = function(x) { // f(x)
return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};
val.setFontSizeListener = function() {
p.style.fontSize = '1px'; // So the text should not overflow the box when measuring.
var noteStyle = window.getComputedStyle(table);
var width = noteStyle.getPropertyValue('width');
var height = noteStyle.getPropertyValue('height');
var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);
Vous devrez probablement modifier ces nombres de font-family à font-family. Une bonne façon de le faire est de télécharger un visualiseur graphique gratuit appelé GeoGebra. Changement de la longueur du texte et la taille de la boîte. Ensuite, vous définissez manuellement la taille. Tracer les résultats manuels dans la coordonnée système. Ensuite, vous entrez les deux équations que j'ai postées ici et vous modifiez les nombres jusqu'à ce que "mon" graphique corresponde à vos propres points tracés manuellement.
Les solutions itératives proposées peuvent être accélérées de façon spectaculaire sur deux fronts:
1) multipliez la taille de la police par une constante, plutôt que d'ajouter ou de soustraire 1.
2) tout d'abord, zéro en utilisant une constante de cours, disons, doubler la taille de chaque boucle. Ensuite, avec une idée approximative de l'endroit où commencer, faites la même chose avec un ajustement plus fin, disons, multipliez par 1.1. Alors que le perfectionniste pourrait vouloir la taille exacte du pixel entier de la police idéale, la plupart des observateurs ne remarquent pas la différence entre 100 et 110 pixels. Si vous êtes un perfectionniste, répétez une troisième fois avec un ajustement encore plus fin.
Plutôt que d'écrire une routine spécifique ou un plug-in qui répond à la question exacte, Je m'appuie simplement sur les idées de base et j'écris des variations du code pour gérer toutes sortes de problèmes de mise en page, pas seulement du texte, y compris les divs, les travées, les images... par Largeur, Hauteur, surface,... dans un conteneur, correspondant à un autre élément....
Voici un exemple:
var nWindowH_px = jQuery(window).height();
var nWas = 0;
var nTry = 5;
do{
nWas = nTry;
nTry *= 2;
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( jQuery('#divTitle').height() < nWindowH_px );
nTry = nWas;
do{
nWas = nTry;
nTry = Math.floor( nTry * 1.1 );
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( nWas != nTry && jQuery('#divTitle').height() < nWindowH_px );
jQuery('#divTitle').css('font-size' ,nWas +'px');
Je sais que celui - ci est un vieux, mais il y a encore des gens qui ont besoin de cette fonctionnalité. je suis allé avec la solution geekMonkey, mais son coup. tout simplement parce que de son lent. ce qu'il fait, c'est qu'il ajuste la taille de la police au maximum (maxFontPixels), puis vérifie, si elle correspond à l'intérieur du conteneur. sinon, il réduit la taille de la police de 1px et vérifie à nouveau. pourquoi ne pas simplement vérifier la hauteur du conteneur précédent et soumettre cette valeur?? (ouais, je sais pas pourquoi, mais j'ai maintenant fait une solution, qui ne fonctionne que sur la hauteur et a également une option min/max)
Solution plus rapide:
var index_letters_resize;
(index_letters_resize = function() {
$(".textfill").each(function() {
var
$this = $(this),
height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
$this.find(".size-adjust").css({
fontSize: height
});
});
}).call();
$(window).on('resize', function() {
index_letters_resize();
);
Et ce serait le HTML:
<div class="textfill">
<span class="size-adjust">adjusted element</span>
other variable stuff that defines the container size
</div>
Encore une fois: cette solution ne vérifie que la hauteur du conteneur. c'est pourquoi cette fonction n'a pas à vérifier si l'élément s'adapte à l'intérieur. mais j'ai aussi implémenté une valeur min/max (40min, 150max) donc pour moi cela fonctionne parfaitement (et fonctionne également sur le redimensionnement de la fenêtre).
J'ai eu le même problème et la solution est essentiellement d'utiliser javascript pour contrôler la taille de la police. Vérifiez cet exemple sur codepen:
Https://codepen.io/ThePostModernPlatonic/pen/BZKzVR
Cet exemple est seulement pour la hauteur, peut-être que vous avez besoin de mettre un peu si est sur la largeur.
Essayez de le redimensionner
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">
<h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var multiplexador = 3;
initial_div_height = document.getElementById ("wrap").scrollHeight;
setInterval(function(){
var div = document.getElementById ("wrap");
var frase = document.getElementById ("quotee");
var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";
if (frase.scrollHeight < initial_div_height - 30){
multiplexador += 1;
$("#quotee").css("font-size", multiplexador);
}
console.log(message);
}, 10);
</script>
</html>
J'ai aimé
let name = "Making statements based on opinion; back them up with references or personal experience."
let originFontSize = 15;
let maxDisplayCharInLine = 50;
let fontSize = Math.min(originFontSize, originFontSize / (name.length / maxDisplayCharInLine));
Voici une autre version de cette solution:
shrinkTextInElement : function(el, minFontSizePx) {
if(!minFontSizePx) {
minFontSizePx = 5;
}
while(el.offsetWidth > el.parentNode.offsetWidth || el.offsetHeight > el.parentNode.offsetHeight) {
var newFontSize = (parseInt(el.style.fontSize, 10) - 3);
if(newFontSize <= minFontSizePx) {
break;
}
el.style.fontSize = newFontSize + "px";
}
}