Comment les CSS `width: auto` et `max-width` affectent-elles le débordement et l'habillage du contenu de l'info-bulle ?

Comportement de débordement du contenu de l'info-bulle

Lors de la création d'une info-bulle avec CSS, vous pouvez vous attendre à ce que la largeur s'ajuste automatiquement pour s'adapter à la longueur du contenu, avec des limites définies par le Propriétés min-width et max-width. Cependant, le comportement diffère lorsque le contenu s'enroule sur plusieurs lignes.

Problème et comportement

Le problème découle de la définition de width: auto et max-width: 250px. Tandis que width: auto permet à l'info-bulle de se réduire pour s'adapter au contenu, max-width limite son expansion à 250px. Ce comportement est évident lorsqu'un long mot à la fin d'une ligne provoque le retour à la ligne du texte, laissant un remplissage visible sur le côté droit de l'info-bulle.

Explication

Un navigateur calcule la largeur de l'info-bulle. en essayant de faire circuler le texte dans la largeur maximale autorisée (250 px). Tout texte en excès est renvoyé aux lignes suivantes. Cependant, une fois le texte renvoyé, la largeur de la boîte est fixée à 250 px car c'est le maximum spécifié dans le CSS. Il ne rétrécit pas pour s'adapter à la largeur réduite du texte après le retour à la ligne.

Résolution

Malheureusement, il n'existe pas de solution simple pour modifier ce comportement. Le retour à la ligne du texte ne permet pas, par nature, de réduire la zone après les sauts de ligne. Par conséquent, l'effet de réduction ou de croissance attendu ne peut pas être obtenu en utilisant ces propriétés CSS.

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!