Comment trouver la longueur physique d'une chaîne?

Dans mon site Web, le nom d'utilisateur de l'utilisateur est toujours affiché en haut de chaque page (avec le titre du site, d'autres liens de page, etc.) dans une taille de police de "3"

Il m'a fallu beaucoup de temps pour comprendre cela, mais il a finalement attiré mon attention sur le fait que les utilisateurs avec des noms d'utilisateur vraiment long ont fini par déranger l'espacement au sommet de chaque page et tout le texte est poussé vers le bas d'une ligne, Toute chose est moche comme péché (c'est seulement visible pour chaque utilisateur car c'est son nom d'utilisateur, mais je ne veux pas que tous mes utilisateurs le voient).

Je ne demande pas comment trouver le nombre de personnages dans leur nom , ce que je veux savoir, c'est la façon dont je peux déterminer l'espace physique que leur nom prendra et, dans le cas où il sera trop long, réduire le nombre Taille de la police à 2, voire 1 si nécessaire.

La raison pour laquelle un simple strlen () ne fonctionnerait pas est en raison des différences d'espace potentielles ("Dionysus tragique" occupe moins de place que "HERSHEYFEVER", même si le premier a plus de personnages).

Une recherche étendue de Google me laisse constamment avec plus de méthodes de comptage de personnage, donc je ne suis pas surnumée.

Vous ne pouvez pas utiliser PHP pour cela, car tellement dépend du style avant-plan (familles de polices, taille de police, style de police, etc.). Vous pouvez utiliser jQuery pour vérifier la longueur de l'élément et appliquer certaines fonctionnalités si nécessaire:

HTML

<span id="box"><?=$yourString?></span> 

JQuery

 $(function() { var box = $('#box'); if (box.width() >= 50) { box.addClass('massiveLength'); } }); 

Ou, si vous souhaitez appliquer quelque chose à tous les éléments, voici un jsFiddle vous montrant comment.

Il est fondamentalement impossible de bien le faire sur le serveur.

Au lieu de cela, utilisez Javascript pour obtenir la largeur réelle de l'élément, puis réduisez sa taille de police.

Je vais juste lancer cela, mais si vous enveloppez le bloc d'utilisateur dans un élément et lui donne une largeur maximale, cela pourrait résoudre votre problème.

 <span style="max-width: 50px; overflow: hidden;">The Username Goes Here</span>