Ширина CSS/Max-Width на линии Wrap?

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

Основываясь на этом стиле, я бы ожидал, что моя подсказка будет уменьшаться или расти, чтобы соответствовать контенту, вплоть до 50 пикселей или до 250 пикселей. Однако свойство max-width, кажется, перегружает свойство width, когда содержимое обтекает следующую строку. Это эстетическая вещь, когда слово в конце предложения длинное, похоже, что оно оставляет кучу дополнения (см. Снимок экрана). Это нормальное поведение?

Ответ 1

Да, это нормальное поведение.

Браузер попытается передать текст внутри строки, пока он не достигнет максимально допустимой ширины 250 пикселей, а затем перенесет на следующую и последующие строки текст, который не может быть помещен в первую строку. (Если текста недостаточно для достижения максимальной ширины, то width: auto заставляет окно сжиматься так, чтобы оно соответствовало именно этому количеству текста.)

Тем не менее, поле не будет сжиматься снова, чтобы соответствовать тексту после его упаковки, потому что обтекание текста не работает именно так. Это означает, что поле width вычисляется как 250px, и только потому, что ваш CSS утверждает, что он может быть не больше 250px. Он не вычисляется до некоторого меньшего значения, равного ширине текста после обертывания, а затем переопределяется символом max-width.

Я не думаю, что вы можете что-то изменить, чтобы изменить это поведение.

Ответ 2

Попробуйте воспользоваться одним из следующих способов:

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

Они не на 100% совместимы, но префиксы исправляют эту проблему более или менее.

Источник: https://developer.mozilla.org/ru/docs/Web/CSS/width