Flexbox에서 `text-overflow: ellipsis`가 예상대로 작동하지 않는 이유는 무엇입니까?

text-overflow Flexbox

이 예에는 텍스트 콘텐츠가 "ThisIsASampleText"인 Flex 컨테이너가 있습니다. "display" 속성을 "flex"로 설정하고 "text-overflow"를 "ellipsis"로 설정하면 텍스트가 잘릴 것으로 예상하지만 의도한 대로 작동하지 않습니다.

코드를 검사해 보면 flex 속성이 컨테이너 요소에 적용됩니다. 그러나 레이아웃과 속성에 영향을 미치려면 Flexbox 스타일을 하위 요소에 적용해야 합니다.

이 문제를 해결하려면 "텍스트 오버플로" 및 관련 스타일을 Flex 하위 요소에 대한 별도의 클래스로 이동할 수 있습니다. 수정된 코드는 다음과 같습니다.

.flex-container {<br> display: flex;<br> text-align: left;<br>}</p>
<p>.flex-child {<br> 공백: nowrap;<br> 오버플로: 숨김;<br> 텍스트 오버플로: 줄임표;<br>}</p>
<p><h1>유연한 상자</h1><br><div> <span class="flex-child">ThisIsASampleText</span><br></div>

".flex-child" 클래스에 잘림 스타일을 적용하여 이제 Flex 컨테이너 내에서 텍스트를 "ThisIsASam..."으로 올바르게 자릅니다. 자세한 설명은 아래 링크된 CSS Tricks의 참고 기사를 참고하세요.

참고: https://css-tricks.com/flexbox-truncated-text/

위 내용은 Flexbox에서 `text-overflow: ellipsis`가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!