×

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

96
赵团结
2016.06.27 12:54* 字数 326

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

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


目录中的省略号

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

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

<ul>
<li class="wrapper">
  <div>嗯嗯嗯嗯嗯</div> <div class="dash"></div> <div>11</div>
</li>
</ul>
.wrapper { display: flex;}.dash { flex: 1; border-bottom: 1px dotted #000;}

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

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

日记本
Web note ad 1