2019獨角獸企業重金招聘Python工程師標準>>>

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
• 技巧：

默認list的高度固定，overflow:hidden；當有錨點#some-anchor, 高度auto；

使用flexbox，自動換行flex-wrap: wrap,多行時自動隱藏

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就不顯示了

利用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

轉載于:https://my.oschina.net/u/2510955/blog/870739

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的纯css实现responsive list -- 魔力calc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。