Flexbox는 `overflow-wrap: break-word` 동작에 어떤 영향을 미치나요?

Flexbox가 Overflow-Wrap에 미치는 영향

CSS 영역에서 Overflow-wrap 및 표시 속성은 상호 작용하여 텍스트 동작을 제어합니다. 포장되어 넘쳐나는 콘텐츠. 특정 시나리오에서 발견된 흥미로운 특징을 살펴보겠습니다.

다음 코드 조각을 고려하세요.

<code class="html"><div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div></code>

overflow-wrap: break-word가 적용되고 두 번째 div 내의 텍스트 . b, 첫 번째 스니펫에서 설명한 대로 여러 줄로 나누어야 합니다.

그러나 랩 컨테이너에 display: flex를 추가하면 상황이 예상치 못한 방향으로 전환됩니다.

<code class="html"><div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div></code>

여기서 시나리오에서는 가로 스크롤 막대가 나타나 특정 지점 이후에는 텍스트를 읽을 수 없게 만듭니다. Overflow: Hidden을 사용하지 않고 이 동작을 어떻게 바로잡을 수 있습니까?

해결책은 Flexbox가 하위 항목에 어떤 영향을 미치는지 이해하는 데 있습니다. 기본적으로 컨테이너에 display: flex가 있는 경우 해당 하위 요소는 flex-direction 속성에 따라 자동으로 행이나 열에 배치됩니다.

이 경우에는 display: flex가 랩에 적용됩니다. 컨테이너에서 a 및 b div는 예상대로 가로로 배치됩니다. 그러나 Flexbox 하위 항목의 min-width 속성은 기본적으로 자동으로 설정되어 있습니다. 즉, 각 div는 콘텐츠를 수용하는 데 필요한 최소 너비를 차지합니다.

문제를 해결하려면 min-width를 명시적으로 설정해야 합니다. b div를 0으로:

<code class="css">.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}</code>

이렇게 하면 b div가 컨테이너의 사용 가능한 너비에 맞게 확장되어 가로 스크롤 막대가 제거되고 텍스트가 의도한 대로 여러 줄로 나누어질 수 있습니다. .

위 내용은 Flexbox는 `overflow-wrap: break-word` 동작에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!