目录中的省略号如何动态改变长短？

如上图，子目录要求显示在一行，两端对齐，中间是省略号。超出的文字直接截掉即可，但是至少要保留一个省略号（6个点）。
如何根据文字的长短来确定省略号显示的长度？

---

最简单的办法就是一张图片放在下面，如果不用图片的话，那就边框线。

用边框线的话，那就是用dotted线条。

li {position:relative;height: 30px;overflow: hidden;}
li span {position: relative;display:inline-block;padding-right: 10px;background-color:#fff;z-index: 2;}
li em {position: absolute;top: 0;right: 0;height: 30px;padding-left: 10px;background-color: #fff;z-index: 2;}
li:after {content:"";position:absolute;top:50%;left:0;height:0;width:100%;border-top:1px dotted #333;}

<ul>
  <li><span>这里是文字啊</span><em>1</em></li>
  <li><span>这里是文字啊</span><em>2</em></li>
  <li><span>这里是文字啊</span><em>3</em></li>
  <li><span>这里是文字啊</span><em>4</em></li>
</ul>

http://jsbin.com/ridedoqeze/edit?html,css,output

更新一下，jsbin的网站打开了，代码也放在里面了

---

https://jsfiddle.net/83gufkdt/2/

你是说这样吗

思路就是用flex对虚线做伸缩，两边自适应挤压虚线…你看css，2行实现