Flexbox+Text ellipsis

参考: Using Flexbox and text ellipsis together · Leonardo Faria

上传文件名的显示:名称过长时截取一部分显示成省略号,但是保留后缀名称的展示

<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>x
  <span class="filename__extension">pdf</span>
</div>
.filename {
  display: flex;
  min-width: 0;
}

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

.filename__extension {
  flex-shrink: 0;
}

主要利用了min-width: 0的设置,min-width默认为auto,是基于内容的最小尺寸和给定大小中的较小值。改为0之后,就会随缩放调整未设置flex-shrink的元素的大小,再配合text-overflow,white-space,overflow来显示省略号。

类似实现参考 Flexbox and Truncated Text | CSS-Tricks

Comments
Write a Comment