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 min-width를 0으로 설정하고 확장자는 줄어들지 않도록 flex-shirnk:0을 줍니다.

- 그렇게 되면 filename 은 0까지 줄어들 수 있습니다.

 

 

 

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