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

赵团结 · 简书 · · 2016-06-27 12:54

正文

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

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

目录中的省略号

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

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

推荐文章

英文悦读 · 怎样才能有效提升语法水平，顺利读懂长难句？

昨天

新周刊 · 被骂恋爱脑，但她早该这么“疯”

昨天

三联生活周刊 · 93岁罪犯不予收押背后：老年性犯罪并不罕见

昨天

三联生活周刊 · “顶流”哪吒背后，谁撑起了“国漫”的登顶时刻？

2 天前

新周刊 · 欧洲人，开始吃虫

2 天前

编织人生 · 还有8天过年啦，传统的过年习俗，你知道多少？

8 年前

军事纵横 · 只要普京承认这一件事，特朗普恐怕立即就得下台

8 年前

政知见 · 最高规格委员会解决“两张皮”问题

8 年前

BiaNews · 格力手机被贱卖，董明珠要求员工高价赎回

8 年前

直播海南 · 提醒 | 海口大英山“砍人”视频网上疯传，警方发话了......

7 年前