Flexbox에서 `text-overflow`가 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Flex Display에서 텍스트 오버플로가 작동하지 않는 이유는 무엇입니까?

CSS에서는 text-overflow 속성을 사용하여 텍스트를 초과하는 경우 텍스트를 자릅니다. 컨테이너의 사용 가능한 너비입니다. 그러나 display: flex와 함께 사용하면 예상대로 작동하지 않을 수 있습니다.

다음 코드를 고려하세요.

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container">

이 예에서 flex-container는 flexbox 컨테이너와 하위 div 내의 텍스트가 잘릴 것으로 예상됩니다. 그러나 다음과 같은 결과가 나타날 수 있습니다.

Output: ThisIsASamp  
Expected: ThisIsASam...

display: flex 속성을 제거하면 텍스트 잘림이 예상대로 작동합니다. 그렇다면 문제는 무엇입니까?

문제는 표시 방식에 있습니다. flex는 컨테이너 내의 공간을 분산합니다. 플렉스가 없으면 텍스트가 사용 가능한 너비로 압축되고 그에 따라 잘립니다. 그러나 flex가 적용되면 하위 요소(div)는 flex 항목이 되고 컨테이너의 flexbox 속성을 상속합니다.

이 문제를 해결하려면 하위 요소의 텍스트를 자르도록 명시적으로 스타일을 지정해야 합니다. 이를 달성하는 한 가지 방법은 flex 하위 요소에 대해 별도의 클래스를 만들고 적절한 스타일을 적용하는 것입니다.

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

이러한 스타일을 하위 요소에 적용하면 하위 요소가 텍스트를 감싸고 잘리는지 확인할 수 있습니다. Flexbox 컨테이너 내에서도 필요합니다.

위 내용은 Flexbox에서 `text-overflow`가 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!