咱們訪問某些網站的時候,常常能夠看到一些廣告彈出來,點擊關閉就不見了,可是從新刷新頁面後,廣告又會從新彈出來。這就是元素的顯示和隱藏的一個應用。css
display屬性用於設置一個元素應如何顯示。web
display隱藏元素後,再也不佔有原來的位置。瀏覽器
visibility屬性用於指定一個元素應可見仍是隱藏。佈局
visibility隱藏元素後,繼續佔有原來的位置。網站
若是隱藏元素想要原來的位置,就用visibility: hiddenspa
若是隱藏元素不想要原來的位置,就用display: nonecode
overflow屬性指定了若是內容溢出一個元素的框(超過其指定高度和寬度)時,會發生什麼。orm
屬性值 | 描述 |
---|---|
visible | 不剪切內容也不添加滾動條 |
hidden | 超出的部分隱藏 |
scroll | 無論有沒有超出,老是顯示滾動條 |
auto | 超出自動顯示滾動條,不超出不顯示 |
通常狀況下,咱們都不想讓溢出的內容顯示出來,由於溢出的部分會影響佈局。可是若是有定位的盒子,請慎用overflow: hidden,由於它會隱藏多餘的部分。對象
單行文本溢出顯示省略號必須知足三個條件:ip
先強制一行內顯示文本
white-space: nowrap;/*默認值normal,自動換行*/
超出的部分隱藏
overflow: hidden;
文字用省略號替代超出的部分
text-overflow: ellipsis;
多行文本溢出顯示省略號,有較大兼容性問題,適合於webkit瀏覽器或移動端,移動端大部分是webkit內核。
overflow: hidden; text-overflow: ellipsis; /*彈性伸縮盒子模型顯示*/ display: -webkit-box; /*限制在一個塊元素顯示的文本的行數*/ -webkit-line-clamp: 2; /*設置或檢索伸縮盒子對象的子元素的排列方式*/ -webkit-box-orient: vertical;