CSS `width` 및 `max-width`는 텍스트 줄바꿈과 어떻게 상호작용합니까?

Line Wrap의 CSS 너비 및 최대 너비: 동작 이해

CSS를 사용하여 요소의 너비를 정의할 때 너비와 최대 너비는 너비 속성은 중요한 역할을 합니다. width는 요소의 정확한 너비를 설정하는 반면, max-width는 허용되는 최대 너비를 지정합니다. 그러나 요소 내에서 텍스트가 줄 바꿈되는 경우 이러한 속성의 동작은 예상치 못한 결과를 가져올 수 있습니다.

다음 CSS 코드를 고려하세요.

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

제공된 코드에 따라 예상되는 사항은 다음과 같습니다. 도구 설명의 너비는 해당 내용에 따라 최소 너비 50px, 최대 너비 250px로 동적으로 조정됩니다. 그러나 도구 설명의 텍스트가 새 줄로 줄 바꿈되면 max-width 속성이 width 속성을 재정의하여 도구 설명에 과도한 여백이 남는 보기 좋지 않은 모양이 나타나는 것으로 관찰되었습니다.

이 동작은 정말 정상이다. 브라우저는 최대 너비 250px에 도달할 때까지 상자 내에서 텍스트 인라인 흐름을 시도합니다. 이 제한에 도달하면 나머지 텍스트는 다음 줄로 줄바꿈됩니다. 그러나 상자 너비는 텍스트 줄 바꿈 후에 다시 줄어들지 않습니다. 이는 텍스트 줄 바꿈의 의도된 동작의 일부가 아니기 때문입니다.

따라서 CSS 사양에 따르면 상자 너비는 250픽셀을 초과할 수 없다고 명시되어 있으므로 상자 너비는 250픽셀로 계산됩니다. 그 가치. 래핑 후 텍스트 너비와 동일하게 계산되지 않고 최대 너비로 재정의됩니다.

안타깝게도 이 동작을 변경할 수 있는 알려진 해결 방법은 없습니다.

위 내용은 CSS `width` 및 `max-width`는 텍스트 줄바꿈과 어떻게 상호작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!