Comment « width » et « max-width » interagissent-ils avec l'habillage de texte en CSS ?

Rhabillage du texte et contrôle de la largeur en CSS

En CSS, les propriétés width et max-width déterminent la largeur d'un élément. Lorsque le contenu d'un élément s'étend sur plusieurs lignes, une divergence apparaît dans le comportement de ces propriétés.

Comportement attendu :

Basé sur le CSS fourni :

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

On pourrait s'attendre à ce que la largeur de l'info-bulle s'adapte à son contenu, en rétrécissant ou en s'agrandissant dans les limites spécifiées. limites.

Comportement réel :

Cependant, lorsque le contenu passe à la ligne suivante, la propriété max-width remplace la propriété width, ce qui donne une largeur d'info-bulle de 250 px. . Cela crée l'apparence d'un remplissage excessif lorsque le dernier mot d'une ligne est relativement long.

Raison du comportement :

Un navigateur tente d'afficher le contenu en ligne jusqu'à ce qu'il atteint la largeur maximale autorisée, dans ce cas 250px. Si le contenu n'atteint pas la largeur maximale, la règle width: auto permet à l'info-bulle de se réduire pour s'adapter au contenu.

Cependant, une fois le contenu terminé, la largeur de l'info-bulle est définie sur 250 px, comme spécifié par max -largeur. En effet, le retour à la ligne du texte ne déclenche pas un recalcul de la largeur de l'élément. La largeur de l'info-bulle reste à 250 px, quelle que soit la largeur du contenu après le retour à la ligne.

Conclusion :

Ce comportement est inhérent à la façon dont les navigateurs gèrent le retour à la ligne du texte et n'est pas quelque chose que peut être facilement personnalisé. Ainsi, il faut être conscient de ce problème esthétique potentiel lorsque l’on travaille avec des éléments à largeur limitée qui peuvent envelopper leur contenu.

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!