最近发了个文，荣幸进入掘金前端“榜一”！，感兴趣的朋友点这里☞链接，
同志们，我飘了！！！
瞬间，觉的作为一个“公众”的并且附带责任感的###前端佬###😎，是时候进行传道授业解惑(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牛.png</span>
</div>
</div>
<div class="item">
<div class="img-container">.zip图标</div>
<div class="text" title="榜1牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛.zip"><span class="span">榜1牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛.zip</span></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">6666666666666666666666666666666</span>
</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山一角。
希望这些能帮助到用的到的前端佬~
