J'ai div avec la hauteur et la largeur fixe et à l'intérieur j'ai un texte qui change, et parfois il peut être un mot ou deux et parfois il peut être une phrase. Ce dont j'ai besoin, c'est de réduire la taille de la police afin qu'elle s'adapte à ce div.Ajuster le texte à un div
Répondre
i avait une idée et cela a fonctionné :) voici mon code
$('li').each(function() {
while ($(this).outerHeight() > 25) {
var currentFontSize = $(this).css("font-size");
$(this).css("font-size", (parseFloat(currentFontSize) - 1) + "px");
}
});
+1 J'ai eu des problèmes pour obtenir la largeur du texte qui a été enveloppé dans un div avec une largeur explicite. J'ai utilisé cette solution -> http://stackoverflow.com/a/2771544/374866 – davehale23
Je dois dire que cette fonction est beaucoup trop lente.Changer les attributs css provoque un redessin de la dom. Si vous avez besoin d'ajuster la taille d'un grand nombre d'éléments ou sur une minuterie, il va perdre votre page Web. Vérifiez ma réponse pour une solution plus efficace mais toujours simple. – Hoffmann
Essayez de donner la taille de la police em:
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
vous pouvez le faire en définissant la taille de la police comme ......
.small {font-size: 0.8em}
vous pouvez voir l'effet ici working demo
J'ai eu un problème similaire, ce qui m'a fait écrire mon propre plugin pour cela. Une solution consiste à utiliser l'approche shrink-to-fit, comme décrit par user54316. Toutefois, si vous devez adapter plusieurs éléments ou si vous êtes concerné par les performances, par exemple lors du redimensionnement des fenêtres, consultez jquery-quickfit. Il mesure et calcule une mesure invariante de taille pour chaque lettre du texte et l'utilise pour calculer la prochaine taille de police qui correspond au texte dans le conteneur. Les calculs sont mis en cache, ce qui le rend très rapide (il n'y a virtuellement aucun impact sur les performances du deuxième redimensionnement avant) lorsqu'il s'agit de plusieurs textes ou d'avoir à ajuster un texte plusieurs fois, comme par exemple sur le redimensionnement de la fenêtre. Je pense que cela fonctionnerait parfaitement dans votre cas.
Vous voulez juste devez appeler
$('#yourid').quickfit()
après avoir modifié le texte.
Il y a un plugin jQuery pour que: FitText.js
Voici l'URL: https://github.com/davatron5000/FitText.js
Voici un exemple: http://jsfiddle.net/martinschaer/sRvB9/
La fonction fitText() reçoit un paramètre , avec lequel vous devez "jouer" pour obtenir les résultats que vous voulez. En outre, il a redimensionné le texte lorsque la fenêtre est redimensionnée; si vous avez besoin d'avoir le texte redimensionnée lorsque (par exemple) un div est redimensionnée, vous devez ajouter une paire de lignes JS pour cela;)
Ceci est pour un redimensionnement de la fenêtre, mais cela ne permet pas de réduire la longueur des chaînes pour qu'elles puissent rentrer dans une div. – Smittles
$text.css('font-size', "100px");
$text.css('line-height', "100px");
var foo= $div.width() /$text.width();
var bar= $div.height() /$text.height();
if(foo < bar) {
foo=Math.floor(foo*100) +"px";
$text.css('font-size', foo);
$text.css('line-height', foo);
} else {
bar=Math.floor(bar*100) +"px";
$text.css('font-size', bar);
$text.css('line-height', bar);
}
//centralizing text, top and left are defined as 50% on the CSS, optional
$text.css('margin-left', -$text.width() /2 + "px");
$text.css('margin-top', -$text.height() /2 + "px");
Une petite note est que vous devez appeler cette fonction si la div lui-même change de taille. Vous pouvez lier ce code à l'événement de redimensionnement de la div.
- 1. Centre div et ajuster le contenu?
- 2. Ajuster divs dans div
- 3. Ajuster la hauteur d'une div pour le contenu du curseur
- 4. Ajuster la hauteur de div au contenu
- 5. texte défilant dans un div
- 6. jquery changer le texte div
- 7. Ajuster la taille du texte de WebView?
- 8. Ajuster le fichier sélectionné à FileFilter dans un JFileChooser
- 9. envelopper un texte long dans un div
- 10. PHP - ajuster le temps
- 11. IE6 problème avec ajuster dynamiquement la hauteur d'un div
- 12. CSS: Ajuster la hauteur d'un bloc à la taille du texte
- 13. ajuster la hauteur de la "div" en fonction du conteneur
- 14. Ajuster automatiquement la hauteur
- 15. Obtenez des nœuds texte d'un div et lier un événement à un parent div
- 16. Ajuster le titreWindow to contents
- 17. Modifier le texte div avec jquery
- 18. Redimensionner dynamiquement le texte pour remplir div
- 19. textbox multiline voir le texte dans un div
- 20. Comment faire du formage de texte en C# pour ajuster le texte d'un contrôle
- 21. Ajuster la fonction de validation de texte pour prendre en compte le texte sélectionné
- 22. Comment changer le texte d'une balise div
- 23. Ajuster l'élément à côté d'un autre?
- 24. remplacer le texte sélectionné dans div divisible
- 25. Ajuster Gridview Largeur
- 26. Texte sortant de Div
- 27. Comment faire hyperlien changer le texte en débordement: div caché sans sauter à la div
- 28. jQuery Live Texte Div
- 29. Développer div pour ajuster le contenu de largeur fixe dans IE 6 et 7
- 30. chevauchement Texte div
Avez-vous une police monospace dans la div? –
vous devriez vérifier ma réponse pour une meilleure performance – Hoffmann