Flexbox로 text ellipsis 표현하기

HTML markup

<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
  <span class="filename__extension">pdf</span>
</div>

CSS

.filename {
  display: flex;
  min-width: 0;
}

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

.filename__extension {
  flex-shrink: 0;
}

 

flex container의 기본 min-width는 auto 입니다. min-width가 auto일 때는 자식 요소들의 최소 너비를 보장하려고 합니다.

이로 인해 텍스트가 긴 경우 text-overflow:ellipsis가 적용되지 않을 수 있는데요.

이 때 min-width를 0으로 설정해서 flex container가 0으로 줄어들 수 있게 허용 처리를 해줍니다.

그 상태에서 flex-shrink 0을 부여한 확장자는 줄어들지 않지만 filename은 말줄임 처리를 할 수 있게 됩니다.

1. container가 줄어들 때 min-width: 0 덕분에 base 부분이 줄어들 수 있게 됨
2. base 부분이 줄어들 때 말줄임(...) 처리가 적용됨
3. extension 부분은 flex-shrink: 0으로 인해 크기가 유지됨

이렇게 해서 "long-filename1111111111111.pdf" 같은 텍스트가 "long-filena...pdf" 처럼 표시되게 됩니다.

 

 

출처 : https://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together/