Pourquoi ma propriété CSS « ​​max-width » laisse-t-elle un remplissage excessif après le retour à la ligne du texte ?

Comprendre le retour à la ligne et le dimensionnement CSS

En CSS, les propriétés width et max-width définissent la taille horizontale d'un élément. Lorsque le contenu d'un élément s'étend au-delà de sa largeur maximale, il passe à la ligne suivante. Cependant, comme le montre l'exemple fourni :

#tooltip { 
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
}

La propriété max-width semble remplacer la propriété width lorsque le contenu passe à la ligne suivante, laissant un remplissage excessif à la fin de la ligne renvoyée.

Explication du comportement normal

Ce comportement est en effet normal. Les navigateurs tentent de faire circuler le texte en ligne dans un élément jusqu'à ce qu'il atteigne la largeur maximale autorisée. S'il ne peut pas tenir sur la première ligne, il revient à la ligne et continue sur les lignes suivantes.

Cependant, après le retour à la ligne, la boîte ne rétrécira pas à nouveau pour s'adapter au texte. En effet, le retour à la ligne du texte ne permet pas ce comportement. La largeur de la boîte est calculée comme la valeur de largeur maximale (dans ce cas, 250 px) et n'est pas basée sur la taille du texte enveloppé.

Solution possible

Malheureusement, il n’existe aucune solution CSS connue pour modifier ce comportement. Les navigateurs fonctionnent de cette manière en raison de la nature inhérente du retour à la ligne du texte.

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!