Szerokość/szerokość maksymalna CSS na okładce liniowej?

Question

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

Opierając się na tym stylu, oczekuję, że moja podpowiedź się skurczy lub rozwinie, by dopasować ją do zawartości, do 50 pikseli lub do 250 pikseli. Wydaje się jednak, że właściwość max-width wydaje się przekraczać moją właściwość width, gdy treść zawija się do następnej linii. Jest rzeczą estetyczną, gdy słowo na końcu zdania jest długie, wygląda na to, że pozostawia masę wyściółki (patrz zrzut ekranu). Czy to normalne zachowanie?

Answer 1

Tak, to jest normalne zachowanie.

Przeglądarka będzie próbować wprowadzić tekst w tekście w polu, aż osiągnie maksymalną dopuszczalną szerokość 250 pikseli, a następnie zawinąć do następnej i kolejnych linii dowolny tekst, który nie mieści się w pierwszym wierszu. (Jeśli nie ma wystarczająco dużo tekstu, aby osiągnąć maksymalną szerokość, a następnie width: auto powoduje, że pole do kurczą się tylko taką ilość tekstu.)

Jednak pole nie skurczy się ponownie, aby dopasować tekst po owinięciu go, bo zawijanie tekstu po prostu nie działa w ten sposób. Oznacza to, że pole width jest obliczane jako 250px i tylko, ponieważ twój CSS stwierdza, że ​​może on wynosić najwyżej 250px. Nie jest ona obliczana na mniejszą wartość równą szerokości znacznika po owijaniu, a następnie przesłonięciu przez max-width.

Nie sądzę, że jest coś, co możesz zrobić, aby zmienić to zachowanie.

Answer 2

Spróbuj użyć jednego z tego:

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

Oni nie są w 100% kompatybilne, ale przedrostki rozwiązać ten problem bardziej lub mniej.

Źródło: https://developer.mozilla.org/ru/docs/Web/CSS/width