플렉스 레이아웃 아래의 텍스트는 생략되지만 컨테이너가 열려 있습니까? 그것을 해결하는 방법?

컨테이너 확장을 유발하는 플렉스 레이아웃에서 텍스트 오버 플로우의 누락을위한 솔루션

플렉스 레이아웃을 사용하는 경우 종종이 상황이 발생합니다. 왼쪽 요소 너비가 고정되고 오른쪽 요소가 나머지 공간에 적응됩니다. 그러나 올바른 텍스트에 엘립스 시스 스타일 ( text-overflow: ellipsis )을 추가 할 때 컨테이너가 실수로 열려 페이지 레이아웃이 파괴됩니다. 이 기사는 원인을 분석하고 솔루션을 제공합니다.

문제 : 플렉스 컨테이너에는 그림 (고정 너비)과 텍스트 (적응 형 남은 공간)가 포함되어 있습니다. 텍스트 생략 스타일을 추가 한 후 컨테이너 너비는 기대치를 초과하고 사용 가능한 공간 (100VW)을 완전히 차지하지 않으며 타원이 유효하지 않습니다. 생략이 설정 되더라도 브라우저는 여전히 긴 텍스트가 완전한 컨텐츠를 표시 할 수있는 충분한 공간을 할당하여 컨테이너가 열리기 때문입니다.

근본 원인은 플렉스 레이아웃의 기본 동작입니다. 어린이는 콘텐츠에 따라 공간을 열어줍니다. 최소 너비는 긴 텍스트로 제한되지 않으며 text-overflow: ellipsis 사용 되더라도 Flex 컨테이너는 텍스트의 실제 내용을 기반으로 너비를 여전히 계산합니다.

해결책 : min-width: 0; 텍스트가 포함 된 요소에 스타일. 이 스타일은 텍스트 요소의 최소 너비가 0이되도록합니다. 텍스트가 너무 길더라도 컨테이너 너비 계산에는 영향을 미치지 않습니다. 플렉스 컨테이너는 나머지 공간에 따라 너비를 할당하여 예상 적응 형 레이아웃을 달성하는 반면 텍스트 오버 플로우 부분은 올바르게 생략됩니다. 이렇게하면 Flex 레이아웃에서 텍스트 오버 플로우 누락으로 인한 컨테이너 확장 문제를 완벽하게 해결하여 적응성 폭과 텍스트 숨기기의 예상 효과를 달성 할 수 있습니다.

위 내용은 플렉스 레이아웃 아래의 텍스트는 생략되지만 컨테이너가 열려 있습니까? 그것을 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!