我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

前言

文本溢出省略 即 文本末尾省略，想必大家在日常需求开发中用的也不少，这种省略方式在大多数场景下是足够适用的。但比如在文档、文件名称上这类需要 有头有尾 来做信息辨别的场景上，就会稍显不足。

举个例子：在线文档文件列表、通知附件下载页等

实现思路

先来说下我们的预期。假设我们已有文字内容 "2022年09月10号所有商品销售利润情况.xlsx" 共计 26 个字。再假设内容我们的文本容器宽度只能容纳 18 个字，那么我们预期展示的文案内容为(中间的省略不算)："2022年09月1...利润情况.xlsx" 。

看到精确到字数别误会，这篇文章并不是让我们按字数来做省略。
内容中间切割分为两部分。从我们预期中间省略的文字中可以看出来是由两部分组成的，那么我们将内容分为：左边：2022年09月10号所有 ，右边：商品利润情况.xlsx。这两部分文案在我们的文本容器中所占的空间是相等的。
左边内容行尾省略实现。其实就是 文本末尾省略的实现，这个大家都懂，就不多说了。最终左边在 文本末尾省略 下会变成 2022年09月1...。
右边内容行头省略实现。现有的API我们是无法直接做到 文本开头省略的，转换下思路，如果我们先将文字倒转 xslx.况情润利品商，然后再利用 文本末尾省略 变成 xslx.况情润利...，最终我们再利用 CSS文本倒序展示方式，文本就会变成 ...利润情况.xlsx。

代码实现

<div class="text-wrapper">
    <!-- js部分省略，自行切割及翻转字符串 -->
  <div class="left">2022年09月10号所有</div>
  <div class="right">xslx.况情润利品商</div>
</div>

.text-wrapper{
  display: flex;
  white-wapce: nowrap;
}
// 左侧部分：行尾省略
.left {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}
// 右侧部分：行尾剪切后文本倒序
.right {
  overflow: hidden;
  flex: 1;
  text-overflow: clip;
  direction: rtl;
  unicode-bidi: bidi-override;
}

CSS如何实现文本中间动态省略？

前言

实现思路

代码实现

实现效果