这是之前我在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%长度的虚线，左右通过背景色来盖住省略号，而且不难实现有很好兼容性。
这是之前我在segmentfault回答的一个内容，觉得很有趣就收集起来。 看到有人问如何实现文章目录的省略号，要...
目录 一、使用Flexbox实现CSS竖向居中 一、理解vertical-align或“如何竖向居中” 1、Tab...
目录 传统盒模型 Flexbox 布局方式 Flexbox 核心概念 Flex 容器属性 flex-directi...
1.flexbox布局 1.1flexbox flexbox布局可以简单快速的实现各种伸缩性的设计。那么flexb...
redis系列文章目录 使用spring-data-redis实现incr自增 Redis 利用Hash存储节约内...
利用flexbox实现div居中的css，高版本IE才支持。不过连微软都放弃IE改用edge了，我们为何还要再垂死...
FlexBox - YogaKit FlexBox是一套通用的布局协议，YogaKit实现了这个协议，iOS端可以...
Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。 一、Flexbox简介 Flexbox布局（...
1、利用flexbox布局 2、.利用绝对定位与transform 3.将父元素定位，子元素绝对定位，利用marg...
本文标题：利用flexbox实现文章目录省略号
本文链接：https://www.haomeiwen.com/subject/nkpzdttx.html
网友评论