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

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;
}

툴팁의 너비가 내용에 맞춰 줄어들거나 늘어날 것으로 예상할 수 있습니다. 지정된 제한.

실제 동작:

그러나 콘텐츠가 다음 줄로 줄 바꿈되면 max-width 속성이 width 속성을 재정의하여 도구 설명 너비가 250px. 이는 줄의 마지막 단어가 상대적으로 길 때 과도한 여백이 나타나는 것처럼 보입니다.

동작 이유:

브라우저는 콘텐츠를 인라인으로 표시하려고 시도합니다. 허용되는 최대 너비(이 경우 250px)에 도달합니다. 콘텐츠가 최대 너비에 도달하지 않는 경우 width: 자동 규칙을 사용하면 툴팁이 콘텐츠에 맞게 줄어들 수 있습니다.

그러나 콘텐츠가 래핑되면 툴팁의 너비는 max에 지정된 대로 250px로 설정됩니다. -너비. 이는 텍스트 줄 바꿈으로 인해 요소 너비가 다시 계산되지 않기 때문입니다. 툴팁의 너비는 래핑 후 콘텐츠 너비에 관계없이 250px로 유지됩니다.

결론:

이 동작은 브라우저가 텍스트 래핑을 처리하는 방식에 내재되어 있으며 이는 쉽게 사용자 정의할 수 있습니다. 따라서 콘텐츠를 둘러쌀 수 있는 너비가 제한된 요소로 작업할 때 이러한 잠재적인 미적 문제를 인식해야 합니다.

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