flex ellipsis1 Flexbox로 text ellipsis 표현하기 HTML markup this-file-has-a-really-really-really-long-filename. pdf CSS .filename { display: flex; min-width: 0; } .filename__base { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .filename__extension { flex-shrink: 0; } - flex min-width를 0으로 설정하고 확장자는 줄어들지 않도록 flex-shirnk:0을 줍니다. - 그렇게 되면 filename 은 0까지 줄어들 수 있습니다. 출처 : https://leonardofaria.net/2020/07/18/using-flexbox-and-t.. 2020. 7. 26. 이전 1 다음