最近发了个文，荣幸进入掘金前端“榜一”！，感兴趣的朋友点这里☞链接，

同志们，我飘了！！！

瞬间，觉的作为一个“公众”的并且附带责任感的###前端佬###，是时候进行传道授业解惑(zhuang bi)了！

中心思想如下：

如何纯CSS解决文本溢出时，中间出现省略号...？？

这要求，是在某一项目中做上传组件时碰到的，排版如图：

前端佬们都应该被UI郑重告知，以上这种排版，是不行的，这么弄整的话，就可能造成UI的宇宙失衡、内分泌失调。

行，改，作为一个专业的前端佬，只要在文本class上加这三行：

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

完美，提交，效果如下：

但，又来一个硬茬。产品经理说，这后面点点的，上传的格式被藏住了，让用户无法一眼看出来是个啥，用户体验不好，需要优化。

行，改，不就是要看后面嘛，来个乾坤大罗移，加上这个：

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

效果杠杠的！！。

但，人生哪有一帆风顺的。产品经理+UI+测试，甚至后端佬都说，这效果真丑。

行，这也不行，那也不行，你们.@&#^#^@@@@^&@@^^&&!

内心一阵活动后，生活还得继续,现实还得面对，经过苦思冥想，行，这么搞，代码如下：

<div class="card-list">
  <div class="item">
     <div class="img-container"><img alt="前端大佬" />div>
     <div class="text" title="66666666666666666666666666666666牛.png">
         <span class="span">666666666666666666666666666666666牛.pngspan>
      div>
  div>
  <div class="item">
      <div class="img-container">.zip图标div>
      <div class="text" title="榜1牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛.zip"><span class="span">榜1牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛.zipspan>div>
   div>
   ...
div>

.text {
    display: flex;
    white-space: nowrap;
}
.text>.span {
    overflow: hidden;
}
.text::after {
    text-overflow: ellipsis;
    direction: rtl; // 改变文本方向
    overflow: hidden;
    content: attr(title); // 获取html中的title属性值
}

效果如下：

但效果上还是有点问题，不是被裁剪了一部分，一部分就是多了一些空格，而且，如果不需要省略的情况，那么这种效果就会造成重复文本。

尝试过很多方案，但始终没有好的方案，只能上JS了，才能解决上面的这一系列问题。还望看到这里的，如果有大佬纯CSS能解决这个问题，兄弟跪求解决思路。

以下为JS解决方案，将整个文本分为两个部分，是的HTML结构中文本如下：

<div class="card-list">
  <div class="item">
     <div class="img-container"><img alt="前端大佬" />div>
     <div class="text" data-title="66牛.png">
         <span class="span">6666666666666666666666666666666span>
      div>
  div>
  <div class="item">
       <div class="img-container">.zip图标div>
       <div class="text" data-title="牛牛牛.zip">
           <span class="span">榜1牛牛牛牛牛牛牛牛牛牛牛牛牛span>
       div>
  div>
   ...
div>

以下为CSS：

.text {
    display: flex;
    white-space: nowrap;
}
.text>.span {
    overflow: hidden;.
    text-overflow: ellipsis;
}
.text::after {
    content: attr(data-title); // 获取html中的title属性值
}

效果如下：

以往看过一个提案，是说能以指定第几个字符之前，出现省略号，后面好像没有啥信了。

撒花，经过各个同事观看后，都说还行，最后呢，产品经理说，项目改版，上传组件排版变更。以上能zhuang一bi的想法以及CSS代码，落入了shi山一角。

希望这些能帮助到用的到的前端佬~