Question Largeur CSS / Max-Largeur sur le retour à la ligne?


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

Basé sur ce style, je m'attendrais à ce que mon info-bulle se réduise ou grossisse pour s'adapter au contenu, jusqu'à 50 pixels ou jusqu'à 250 pixels. Cependant, la propriété max-width semble dépasser ma propriété width lorsqu'un contenu est placé sur la ligne suivante. C'est une chose esthétique quand le mot à la fin d'une phrase est long, on dirait qu'il laisse un tas de rembourrage (voir capture d'écran). Est-ce le comportement normal?

enter image description here


11
2017-09-11 20:59


origine


Réponses:


Oui, c'est le comportement normal.

Un navigateur essaiera de faire circuler votre texte en ligne dans la boîte jusqu'à ce qu'il atteigne sa largeur maximale autorisée de 250px, puis encapsule les lignes qui ne peuvent pas tenir sur la première ligne. (S'il n'y a pas assez de texte pour atteindre la largeur maximale, alors width: auto provoque la réduction de la boîte pour correspondre à cette quantité de texte.)

Cependant, la boîte ne rétrécira plus pour s'adapter au texte après l'avoir encapsulée, car le retour à la ligne ne fonctionne pas comme cela. Cela signifie que la boîte est width est calculé comme 250px, et seulement parce que votre CSS indique qu'il ne peut être que 250px au maximum. Il n'est pas calculé à une valeur inférieure égale à la largeur de la texte après emballage puis remplacé par max-width.

Je ne pense pas que vous puissiez faire quelque chose pour changer ce comportement.


13
2017-09-11 21:03



Essayez d'utiliser l'un de ceux-ci:

width: max-content;
width: min-content;
width: available;
width: fit-content;

Ils ne sont pas compatibles à 100%, mais les préfixes résolvent ce problème plus ou moins.

La source: https://developer.mozilla.org/ru/docs/Web/CSS/width


2
2017-10-12 08:37