CSS元素的顯示與隱藏

CSS元素的顯示與隱藏

咱們訪問某些網站的時候,常常能夠看到一些廣告彈出來,點擊關閉就不見了,可是從新刷新頁面後,廣告又會從新彈出來。這就是元素的顯示和隱藏的一個應用。css

1. display屬性

display屬性用於設置一個元素應如何顯示。web

  • display: none; 隱藏對象
  • display: block; 除了轉換爲塊級元素以外,同時還有顯示元素的意思

display隱藏元素後,再也不佔有原來的位置。瀏覽器

2. visibility可見性

visibility屬性用於指定一個元素應可見仍是隱藏。佈局

  • visibility: visible; 元素可見
  • visibility: hidden; 元素隱藏

visibility隱藏元素後,繼續佔有原來的位置。網站

若是隱藏元素想要原來的位置,就用visibility: hiddenspa

若是隱藏元素不想要原來的位置,就用display: nonecode

3. overflow溢出

overflow屬性指定了若是內容溢出一個元素的框(超過其指定高度和寬度)時,會發生什麼。orm

屬性值 描述
visible 不剪切內容也不添加滾動條
hidden 超出的部分隱藏
scroll 無論有沒有超出,老是顯示滾動條
auto 超出自動顯示滾動條,不超出不顯示

通常狀況下,咱們都不想讓溢出的內容顯示出來,由於溢出的部分會影響佈局。可是若是有定位的盒子,請慎用overflow: hidden,由於它會隱藏多餘的部分。對象

4. 溢出的文字省略號顯示

4.1 單行文本溢出顯示省略號

單行文本溢出顯示省略號必須知足三個條件:ip

  1. 先強制一行內顯示文本

    white-space: nowrap;/*默認值normal,自動換行*/
  2. 超出的部分隱藏

    overflow: hidden;
  3. 文字用省略號替代超出的部分

    text-overflow: ellipsis;

4.2 多行文本溢出顯示省略號

多行文本溢出顯示省略號,有較大兼容性問題,適合於webkit瀏覽器或移動端,移動端大部分是webkit內核。

overflow: hidden;
text-overflow: ellipsis;
/*彈性伸縮盒子模型顯示*/
display: -webkit-box;
/*限制在一個塊元素顯示的文本的行數*/
-webkit-line-clamp: 2;
/*設置或檢索伸縮盒子對象的子元素的排列方式*/
-webkit-box-orient: vertical;
相關文章
相關標籤/搜索