내 CSS `max-width` 속성이 텍스트 줄 바꿈 후에 초과 여백을 남기는 이유는 무엇입니까?

줄 바꿈 및 CSS 크기 조정 이해

CSS에서 width 및 max-width 속성은 요소의 가로 크기를 정의합니다. 요소의 내용이 최대 너비를 초과하면 다음 줄로 넘어갑니다. 그러나 제공된 예에서 볼 수 있듯이:

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

내용이 다음 줄로 줄 바꿈될 때 max-width 속성은 너비 속성을 재정의하는 것으로 나타나 줄 바꿈된 줄 끝에 과도한 여백이 남습니다.

정상적인 행동 설명

이러한 행동은 그야말로 정상적인 행동입니다. 브라우저는 허용되는 최대 너비에 도달할 때까지 요소 내에서 텍스트 인라인 흐름을 시도합니다. 첫 번째 줄에 맞지 않으면 줄 바꿈하여 다음 줄에 계속됩니다.

그러나 줄 바꿈 후에는 텍스트에 맞게 상자가 다시 줄어들지 않습니다. 이는 텍스트 줄 바꿈이 해당 동작을 허용하지 않기 때문입니다. 상자의 너비는 최대 너비 값(이 경우 250px)으로 계산되며 래핑된 텍스트의 크기를 기준으로 하지 않습니다.

가능한 해결 방법

불행하게도 이 동작을 변경하는 알려진 CSS 솔루션은 없습니다. 브라우저는 텍스트 래핑의 본질적인 특성으로 인해 이러한 방식으로 작동합니다.

위 내용은 내 CSS `max-width` 속성이 텍스트 줄 바꿈 후에 초과 여백을 남기는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!