J'affiche des articles sur une page. Les titres d'article se déversent parfois sur deux lignes et peuvent même avoir un seul mot sur la deuxième ligne. Ceci est très indésirable. À l'aide de JQuery / CSS, quelle serait la meilleure méthode pour déterminer par programmation une nouvelle forme de police pour les titres pour les garder sur une ligne?
6 Réponses :
Je devine juste ici - pouvons-nous le faire en utilisant JS pour connaître la hauteur du conteneur du texte, puis diminuer la taille de la police si nécessaire? Je suppose que cela introduira les contenus de page redimensionnant à cause du changement.
Vous pouvez simplement compter le nombre de caractères dans le titre et élaborer une taille de police en fonction de cela. Plus de caractères = taille de police plus petite.
Je placerais des bouchons sur la taille et la taille de la taille de la police, pour empêcher toutefois les résultats stupides.
Une solution simple serait de mettre un élément juste à la fin de la ligne et de réduire la taille du texte jusqu'à ce que sa offsetheight soit correcte. Par exemple, enveloppez l'arrêt complet de:
<span id="check">.</span>
Compter des caractères est une solution, mais vous devrez prendre en compte la largeur des caractères. 'W' est plus large que 'i', sauf si vous utilisez des polices à largeur fixe.
En outre, vous ne pouvez pas garantir que la police de votre choix sera disponible dans le navigateur du client, que ses paramètres de taille de police seront les mêmes arres, etc.
Vous pouvez, cependant, combiner deux solutions - d'abord, la taille de la police approximative à l'aide d'un algoriggthme de comptage de caractères, par exemple - supposons que les caractères ont une largeur fixe, puis corrigez vos calculs avec JS client, si JS détermine que la ligne a été divisée quand même.
Ça nécessitera un réglage, mais je crois que des résultats acceptables peuvent être atteints.
Je suppose que vous avez une taille de texte par défaut, définissez-la à cela et vérifiez la progression de l'élément. S'il s'agit évidemment de deux lignes, réduisez la taille de la police jusqu'à ce que la décistance soit réduite considérablement d'environ 50%
un exemple en utilisant jQuery ...
type de hack mais: quelque chose comme ça va vous chercher. Cela a probablement besoin d'un peu plus de sweeking. Fondamentalement, il close de l'élément et définit le texte du clone sur & nbsp. Il a donc une idée de la hauteur d'une ligne. Ensuite, il diminue la taille de la police de l'élément jusqu'à ce qu'elle soit plus petite que la hauteur de la cible.
Gardez à l'esprit que vous devriez également joindre cette fonction au redimension du parent ().
Êtes-vous sûr que CSS ("FontSize") va retourner n'importe quoi s'il n'a pas été précédemment défini avec JavaScript ?
Bon point - je viens de tester ça retourne bien. Je suis également allé de l'avant et j'ai testé qu'il renvoie toujours un résultat s'il n'est pas défini dans CSS, et cela le fait.
Ceci est duplicata d'une autre question: Stackoverflow.com/questions/875183/...
Comment sont-ils coiffés? Quelle taille / unités?
Pixels, en ce moment. Mais si la méthode requise des unités, je pourrais changer.