CSS Flex 实现文本截断

Leophen

发布于 2022-05-07 19:32:18

1.2K0

发布于 2022-05-07 19:32:18

文章被收录于专栏：Web前端开发Web前端开发

实现效果：

.html：

<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;
}

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

.filename__extension {
  flex-shrink: 0;
}

主要是用到 flex-shrink，将其设置为 0 实现部分文本固定

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-08-07，如有侵权请联系 cloudcommunity@tencent.com 删除

css