web-dev-qa-db-fra.com

Réduire automatiquement la taille de la police pour les mots longs

Je travaille sur un site de commerce électronique sur lequel les titres d'articles et de produits devront être affichés dans des divs assez étroits. Je souhaite définir une taille de police spécifique pour les mots pouvant naturellement tenir dans l'espace prévu, tout en expliquant aux mots trop longs la taille de la largeur de l'objet parent à être automatiquement réduits, évitant ainsi la césure. Il semble que quelqu'un ait déjà pensé à un moyen de faire cela auparavant, mais je n'ai pas trouvé de solution sur le Web. Le plus proche de ma réponse est le plugin BigText jQuery , mais il est vraiment conçu pour les situations dans lesquelles vous pouvez prédire vos propres sauts de ligne. Puisque mes titres seront interrogés par Wordpress et insérés dans des divs, ce plugin réduira mes textes jusqu'à ce que chaque mot puisse tenir sur une ligne, ce qui n'est pas ce que je recherche. S'il vous plaît laissez-moi savoir si vous avez des suggestions. Merci beaucoup votre temps! Meilleur, Jonathan

jquerycssjavascriptformattingtext
4
jfudem

J'ai fait quelque chose de similaire en adoptant l'approche simple consistant à ajouter une classe CSS aux titres en fonction du nombre de caractères. Cette classe CSS diminue ensuite letter-spacing et/ou font-size.

// Count the characters, taking Unicode into account
$chars = mb_strlen($post->post_title);

// For every 10 characters after the first 20, add a size
$size = max(0, ceil(($chars - 20) / 10));

// Generate the CSS class: x-long, xx-long, etc.
$class = ($size) ? str_repeat('x', $size).'-long' : '';

// Output
echo '<h1 class="'.$class.'">'.esc_html($post->post_title).'</h1>';

Cette approche est cependant assez naïve. Il ne prend pas en compte la largeur réelle des caractères telle que rendue par la police. Pour cela, vous aurez besoin d’une approche JavaScript.

5
Geert