(0)写在前面
　　讲述知乎上看到的一篇文章中的一个案例，让我脑洞大开，佩服至极，特意第二天找到原文赞赏了
5元，原文地址https://zhuanlan.zhihu.com/p/27258076，案例用了很多css3的属性。
(1)效果演示

<div> <ul> <li> <a href="#">Home</a> </li> ... <li aria-hidden="true"> <a href="#mylist"><span>more</span></a> </li> <li aria-hidden="true"> <a href=""><span>less</span></a> </li> </ul> </div> .trunc-list-wrapper { height: 2.25em; overflow: hidden; padding-right: 3.5em; } .trunc-list { display: flex; flex-wrap: wrap; position: relative; } .trunc-list li { flex: 1 0 auto; } .control { position: absolute; top: 0; right: -3.5em; width: 3.5em; height: calc((2.25em - 100%) * -1000); max-height: 2.25em; overflow: hidden; } .control--close { display: none; }

上述为简易代码

display: flex;使.trunc-list内部元素成为flex项目

flex-wrap: wrap; 宽度不变时内部元素将换行，所以浏览器窗口缩放到一定宽度时，.trunc-list的高度发生 

变化。
看不见缩放的元素是因为.trunc-list-wrapper的 height: 2.25em;overflow: hidden;导致
元素被隐藏。
trunc-list高度发生变化使得 height: calc((2.25em - 100%) * -1000);产生作用，可以看见more了， 
max-height: 2.25em;限制了最大高度。

点击more，因为
#myList是一个有效描点，下面的css生效

.trunc-list-wrapper:target .control--open { display: none; } .trunc-list-wrapper:target .control--close { display: block; }

同时下面的css生效

.trunc-list-wrapper:target { height: auto; }

隐藏的元素可以看见了

点击less时，因为是无效的锚点，相对于对上述效果的清除。

4.完整的代码

响应式的另一种思考 * { box-sizing html { line-height font-family .trunc-list-wrapper { height overflow padding-right .trunc-list { list-style display flex-wrap margin padding position .trunc-list li { margin padding flex .trunc-list a { display padding text-align white-space color background .trunc-list a:hover, .trunc-list a:active, .trunc-list a:focus { background .control { position top right width height max-height overflow .control a { text-decoration .control span { font-size font-style .control--close { display .trunc-list-wrapper:target { height .trunc-list-wrapper:target .control--open { display .trunc-list-wrapper:target .control--close { displayHomeBlogAbout UsContact UsHelpLoginSign Inmoreless改变视口宽度大小来观察效果