Audacieux sur volant ... sans le changement de mise en page

Le changement de poids de la police, en particulier en gras, déclenche souvent des changements de mise en page. En effet, le texte audacieux occupe généralement un espace plus horizontal. Bien que sans conséquence dans certaines dispositions (par exemple, des liens empilés verticalement), il peut être problématique dans d'autres, tels que les lignes horizontales où les éléments peuvent se déplacer.

Ryan Mulligan met en évidence ce problème et offre une solution élégante:

Le plan en plan pour le texte en gras provoque des déplacements de mise en page notables, en particulier avec des éléments d'emballage. Une solution de contournement intelligente: un pseudo-élément caché reflétant le texte, pré-bêlé pour réserver l'espace nécessaire.

Voir It In Action: https://www.php.cn/link/e44956a0a9118d2bfe39f3483f57db37 pic.twitter.com/kdzbtl0rd

- Ryan Mulligan (@HexagonCircle) 20 juillet 2020

L'approche de Mulligan est ingénieuse. Chaque élément de liste comprend un pseudo-élément caché contenant une chaîne de texte identique, pré-stylé en gras. Cet élément invisible se réserve la largeur requise, empêchant la mise en page change lorsque le texte de la liaison réel est en gras en survol.

L'efficacité de cette technique dépend également de la méthode de mise en page. Forcer un nombre fixe de colonnes avec la grille CSS, en particulier avec du texte qui ne dépasse pas la largeur des colonnes, élimine le problème de changement de vitesse. Cependant, permettre un emballage de colonne automatique réintroduire probablement le problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!