html:

<div class="trunc-list-wrapper" id="mylist"><ul class="trunc-list"><li><a href="#">A link</a></li><li><a href="#">Somewhere</a></li><li><a href="#">A bit longer</a></li><li><a href="#">Another one</a></li><li><a href="#">Yet another</a></li><li><a href="#">Again</a></li><li><a href="#">Last one</a></li><li aria-hidden="true" class="control  control--open"><a href="#mylist"><span>more</span></a></li><li aria-hidden="true" class="control  control--close"><a href="#"><span>less</span></a></li></ul>
</div><p>Resize this frame to see the truncating effect.</p>

css:

• 要求：当页面宽度足够时，不显示control(more / less)，当小屏幕页面宽度不够时，显示more，点击后分行显示所有item
• 技巧：

1. 默认list的高度固定，overflow:hidden；当有锚点#some-anchor, 高度auto；
2. 使用flexbox，自动换行flex-wrap: wrap,多行时自动隐藏
3. control在list是一行时不显示，在list是多行(虽然高度是多行，但overflow:hidden 属性隐藏了多行)时，显示control，可以使用

   height: calc((2.25rem - 100%) * -1000)

   这样，当height: ((2.25rem - 4.5rem) * -1000) = 2250，这时max-height: 2.25rem便限制了，使得高度为2.25rem; 当100%<=2.25rem时(即宽度足够，一行显示)，height: -number 就是0， 所以control就不显示了

4. 利用el:target显示和隐藏control(more/less)，先显示more，more设置一个锚点，也可以利用transition加上动画

/* Basic common settings: */
$primary-color: rgb(0,20,30);* {box-sizing: border-box;
}html {line-height: 1.25;font-family: 'Lato', sans-serif;
}/* The pattern: */.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
}.trunc-list {list-style: none;display: flex;flex-wrap: wrap;margin: 0;padding: 0;position: relative;
}.trunc-list li {margin: 0;padding: 0;flex: 1 0 auto;
}.trunc-list a {display: block;padding: 0.5em;text-align: center;white-space: nowrap;color: #fff;background: $primary-color;
}.trunc-list a:hover,
.trunc-list a:active,
.trunc-list a:focus {background: lighten($primary-color, 10);
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
}.control a {text-decoration: none;
}.control span {font-size: 0.75em;font-style: italic;
}.control--close {display: none;
}.trunc-list-wrapper:target {height: auto;
}.trunc-list-wrapper:target .control--open {display: none;
}.trunc-list-wrapper:target .control--close {display: block;
}

宽度足够时：

宽度不够时：

点击more:

参考资料：https://www.sitepoint.com/responsive-css-patterns-without-media-queries/?utm_source=frontendfocus&utm_medium=email