css flex ellipsis 해결법

해결책은 min-width: 0;플렉스 자식에 있습니다.

또는 min-width실제 가치. 이것이 없으면 다른 텍스트 요소를 포함하는 flex 자식은 해당 텍스트 요소의 "묵시적인 너비"를 넘어서 좁아지지 않습니다.

이 문제가 처음 발생했을 때 AJ Foster의 Pen을 통해 해결책을 찾았습니다 . 그는 다음과 같이 씁니다.

드래프트 사양 에 따르면 플렉스 컨테이너의 크기를 줄일 때 위의 텍스트가 완전히 축소되지 않아야합니다. .subtitle의 너비는 100 %이므로 flexbox가 만드는 min-width : auto 계산은 컨테이너가 우리가 원하는 것보다 커야한다고 말합니다.

이 동작은 Chrome, Opera 및 Firefox에서 일관된 것으로 나타났습니다. 사파리는 최소 너비가 없어도 축소 / 잘 렸습니다 (제 생각에는 사양에 비해).

 

 

요약 해결책 min-width: 0