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

字数 263阅读 399

这是之前我在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%长度的虚线,左右通过背景色来盖住省略号,而且不难实现有很好兼容性。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • “阿甘,你在空间发的那条什么囧游的动态是咋回事!”我一边刷手机一边爬上床打算午休,突然看见一条高中同学发在空间里的...
  • “己所不欲,勿施于人。” 中国传统观念将孩子看作是血脉的延续、家族的传承。 悠悠上千年的观念已经深植人心,孩子从出...