Flexbox는 Overflow-Wrap: Break-Word의 동작에 어떤 영향을 미칩니까?

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

Flexbox의 CSS 요소 도입으로 Overflow-wrap:break-word의 동작이 변경될 수 있습니다. Overflow-wrap: break-word를 사용하여 요소에 적용하면 Flexbox는 기본적으로 요소를 한 줄로 재구성합니다.

그러나 Flexbox 하위 속성의 기본 최소 너비는 자동이므로 a 및 b와 같은 요소가 우리의 예에서는 콘텐츠에 따라 최소 너비를 유지합니다. 가로 스크롤 막대를 제거하려면 min-width 속성을 조정할 수 있습니다.

<code class="css">.b {
  min-width: 0;
}</code>

min-width를 0으로 설정하면 콘텐츠가 자연스럽게 흐르도록 하여 가로 스크롤 막대를 트리거하지 않고도 줄 바꿈이 예상대로 작동할 수 있습니다. 스크롤합니다.

다음은 시연을 위해 수정된 예입니다.

<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 fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    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>

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

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

위 내용은 Flexbox는 Overflow-Wrap: Break-Word의 동작에 어떤 영향을 미칩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!