利用flexbox实现文章目录省略号

这是之前我在segmentfault回答的一个内容，觉得很有趣就收集起来。

看到有人问如何实现文章目录的省略号，要动态改变长度的。

目录中的省略号

实际上想实现这个效果思路上就是保证省略号的伸缩性，那么大概有两种思路吧：
1.省略号做为填充
2.省略号当做背景

第一种思路不难理解，就是把它们当成三列布局，由左（标题）右（页码）的宽度为基准，剩下的全部填充省略号。在这个回答中我使用较为方便的flex。整理作为flex布局，省略号的div做伸缩，加上dotted就可以了。

  
嗯嗯嗯嗯嗯
 
 
11

.wrapper { display: flex;}.dash { flex: 1; border-bottom: 1px dotted #000;}

但是考虑到兼容性，flex仅在ie9以上有较好支持，

所以有思路2，可以将省略号作为100%长度的虚线，左右通过背景色来盖住省略号，而且不难实现有很好兼容性。