Pourquoi mon info-bulle CSS ne rétrécit-elle pas après le renvoi à la ligne ?

Comprendre la largeur CSS et la largeur maximale sur l'habillage de texte

Lors de l'implémentation d'une info-bulle à l'aide de CSS, il est courant d'utiliser à la fois la largeur et la largeur maximale. propriétés width pour contrôler sa taille. Cela permet à l'info-bulle de s'adapter à différentes longueurs de contenu, garantissant qu'elle est suffisamment spacieuse pour accueillir le contenu sans déborder, sans toutefois être inutilement large.

Cependant, une anomalie se produit lorsque le texte de l'info-bulle passe à la ligne suivante. Au lieu que l'info-bulle se rétrécisse pour s'adapter au contenu enveloppé, elle reste à sa largeur maximale. Cela laisse un remplissage important sous le texte, comme le montre la capture d'écran fournie.

Ce comportement est considéré comme normal dans les mécanismes d'habillage du texte. Un navigateur donnera la priorité à l'affichage du texte dans la largeur maximale spécifiée, en envoyant tout excédent aux lignes suivantes. Cependant, la largeur de la zone contenant le texte ne sera pas ajustée en fonction de la taille du contenu enveloppé.

Malheureusement, il n'existe aucun moyen direct de modifier ce comportement. La boîte continuera à occuper sa largeur maximale, que le texte réel nécessite ou non moins d'espace après le retour à la ligne.

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!