Comment les CSS « largeur » et « max-width » interagissent-elles avec l'habillage du texte ?

Largeur CSS et largeur maximale lors du retour à la ligne : comprendre le comportement

Lors de la définition de la largeur des éléments à l'aide de CSS, la largeur et la largeur maximale les propriétés de largeur jouent un rôle important. Alors que width définit la largeur exacte d'un élément, max-width spécifie la largeur maximale autorisée. Le comportement de ces propriétés, cependant, peut être inattendu dans les cas où le texte est renvoyé à la ligne dans l'élément.

Considérez le code CSS suivant :

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

Selon le code fourni, l'attente est que la largeur de l'info-bulle s'ajustera dynamiquement en fonction de son contenu, avec une largeur minimale de 50 px et une largeur maximale de 250 px. Cependant, il a été observé que lorsque le texte de l'info-bulle passe à une nouvelle ligne, la propriété max-width remplace la propriété width, ce qui entraîne une apparence peu attrayante où l'info-bulle laisse un remplissage excessif.

Ce comportement est effectivement normal. Les navigateurs tenteront de faire circuler le texte en ligne dans la zone jusqu'à ce qu'il atteigne la largeur maximale de 250 px. Une fois cette limite atteinte, le texte restant est renvoyé à la ligne suivante. Cependant, la largeur de la boîte ne diminuera pas à nouveau après l'habillage du texte, car cela ne fait pas partie du comportement prévu de l'habillage du texte.

Par conséquent, la largeur de la boîte est calculée à 250 px car la spécification CSS stipule qu'elle ne peut pas dépasser cette valeur. Il n'est pas calculé pour être égal à la largeur du texte après le retour à la ligne, puis remplacé par max-width.

Malheureusement, il n'existe aucune solution de contournement connue pour modifier ce comportement.

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!