Flexbox는 'overflow-wrap' 동작에 어떤 영향을 미치며 어떻게 해결할 수 있나요?

Flexbox가 Overflow-Wrap 동작에 미치는 영향

CSS에서 Overflow-wrap 속성을 사용하면 텍스트가 다음과 같은 경우 여러 줄로 나눌 수 있습니다. 줄 바꿈 문자. 이를 통해 텍스트 레이아웃이 더욱 유연해지고 긴 줄이 컨테이너에 넘치지 않게 됩니다. 그러나 display: flex 속성과 결합하면 Overflow-wrap이 예상치 못한 동작을 보일 수 있습니다.

문제:

overflow-wrap: break가 있는 다음 스니펫을 고려하세요. -word는 두 개의 하위 요소가 있는 컨테이너에 적용됩니다.

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal 
    ... (very long text)
  </div>
</div>

overflow-wrap이 활성화되면 두 번째 하위 요소의 텍스트가 예상대로 여러 줄로 나누어져야 합니다. 그러나 컨테이너에 display: flex를 추가하면 Overflow-wrap 설정에도 불구하고 가로 스크롤 막대가 나타납니다.

해결책:

가로 스크롤 막대를 제거하려면 Flexbox 하위 요소의 기본 최소 너비 속성을 재정의해야 합니다. min-width를 0으로 설정하면 하위 요소의 너비가 콘텐츠에 맞게 줄어들어 컨테이너가 넘치지 않게 됩니다.

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

이 조정을 통해 두 번째 하위 요소의 긴 텍스트가 줄바꿈됩니다. 가로 스크롤 막대를 발생시키지 않고 여러 줄로 이동합니다. 이는 display: flex가 다른 CSS 속성의 동작에 영향을 미칠 수 있지만 여전히 Overflow-wrap과 함께 사용하여 원하는 텍스트 레이아웃을 얻을 수 있음을 보여줍니다.

위 내용은 Flexbox는 'overflow-wrap' 동작에 어떤 영향을 미치며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!