Redimensionnement de la police en fonction de la longueur de la chaîne

Vous devriez faire familiarisé avec l'aide de plugins, ils économiser beaucoup de temps et bien sûr, ils sont très fiables (elles sont écrites par des scripteurs/programmeurs et ont été testés par la communauté). Cependant on dirait que vous voulez de pure JS solution. J'ai juste fait ce code pour vous. Il fonctionne assez BIEN (même si je ne suis pas sûr si c'est aussi bon que certains plugins). La seule exigence est l'élément dont vous souhaitez régler la taille de police en fonction de la longueur du texte) doit contenir de texte brut, pas de code HTML.

L'idée de la mettre en œuvre à l'aide de pure JS est simple, vous avez besoin d'un mannequin élément créé à l'aide de script, ce mannequin élément est utilisé pour mesurer la taille du texte. Nous avons besoin d'ajuster la taille de police de l'élément "factice" jusqu'à ce que la taille du texte (ainsi que de l'élément dummy) devrait être limité à la taille de l'élément (dont la taille de police que vous souhaitez ajuster). J'ai fait le code, très clairement, j'espère que vous comprendrez mieux après la lecture du code:

//we just need 1 dummy element for the whole page.
var dummy = document.createElement('div');
dummy.className = 'dummy';
var inSingleLineMode, inMultilineMode;    
//function used to adjust the font-size of the element
//so that the width is fixed (single-line mode) or both the width and height are 
//fixed (multi-line mode), of course the text should be contained within 
//the fixed width and height.
function adjustFontSize(element, singleLine){
if(!element.innerHTML) return;
var elementStyle = getComputedStyle(element);        
dummy.style.font = elementStyle.font;
initMode(singleLine, function(){ dummy.style.width = elementStyle.width });
dummy.style.padding = elementStyle.padding;
dummy.style.boxSizing = elementStyle.boxSizing;
dummy.innerHTML = element.innerHTML;
document.body.appendChild(dummy);
var dummyStyle = getComputedStyle(dummy);          
while(singleLine ? parseInt(dummyStyle.width) < parseInt(elementStyle.width) :
parseInt(dummyStyle.height) < parseInt(elementStyle.height)){
dummy.style.fontSize = parseFloat(dummyStyle.fontSize) + 1 + 'px';
dummyStyle = getComputedStyle(dummy);
}
while(singleLine ? parseInt(dummyStyle.width) > parseInt(elementStyle.width) :
parseInt(dummyStyle.height) > parseInt(elementStyle.height)){
dummy.style.fontSize = parseFloat(dummyStyle.fontSize) - 1 + 'px';
dummyStyle = getComputedStyle(dummy);
}    
element.style.fontSize = dummyStyle.fontSize;
document.body.removeChild(dummy);
}
function initMode(singleLine, callback){
if(!dummy) return;
if(singleLine&&!inSingleLineMode) {
dummy.style.whiteSpace = 'nowrap';
dummy.style.width = 'auto';
dummy.style.display = "inline-block";
inSingleLineMode = true;
inMultiLineMode = false;
} else if(!singleLine&&!inMultilineMode) {
if(callback) callback();
dummy.style.whiteSpace = 'initial';
dummy.style.display = "block";
dummy.style.wordWrap = 'break-word';
inMultilineMode = true;
inSingleLineMode = false;
}
}

La démo.

Dans la démo, vous pouvez voir que le premier menu #menu1 est le mot Vietnamien sens Chrysanthème tandis que le second menu #menu2 est bien sûr le mot anglais Chrysanthème. Ils ont beaucoup de longueur différente, mais les deux sont censés avoir une largeur fixe de 100px, d'où le deuxième menu #menu2 doit avoir une police plus petite taille pour s'adapter à l'espace.

OriginalL'auteur King King

Ce n'est pas possible sans Javascript. À l'aide de Javascript, vous pouvez utiliser l'une des nombreuses bibliothèques, comme FitText.

De sorte que vous pourrait utiliser une bibliothèque Javascript pour cela, mais cela pourrait également signifier que les différentes étiquettes de tailles de police différentes.
Je pense que la meilleure approche serait de style le menu de telle manière qu'il gracieusement poignées multi-ligne de légendes. De cette façon, la longueur n'a pas vraiment beaucoup d'importance.

Parce que certaines langues sont "plus long" que d'autres (par exemple, les français sont sur avarage de 1,5 à 2 fois plus long que l'anglais, c'est une bonne idée de tester votre interface avec l'une de ces langues.

Et pour la taille de la police, vous pouvez ajouter un modificateur sur le côté serveur, pour instace si vous connaissez la langue en cours est en français, vous pouvez ajouter une classe 'gui-sous-titres-très-long" pour le html balise et d'appliquer votre CSS basé sur la classe. De cette façon, vous pouvez avoir un générique modificateur de laquelle vous pouvez configurer pour chaque langue. Je pense que c'est une meilleure solution que de faire toutes les étiquettes tenir sur une seule ligne.

Garder à l'esprit que, que, de plus petites tailles sont plus difficiles à lire. Vous ne pouvez pas seulement de rendre les polices de la moitié de la taille si le texte est deux fois plus long. Vous devrez régler votre conception (ou de sa mise en œuvre) pour en faire des textes plus longs possible.

OriginalL'auteur GolezTrol