css元素的顯示及隱藏、文字隱藏


1、元素的顯示及隱藏

1、實現方式:

①    display 

②    visibility

③    overflow

2、display

①    元素的隱藏  display: none; 

1)        結論:元素本身還在DOM中,只是隱藏而已

2)                      元素是不占位置的

②    元素的顯示  display: block;

1)        結論:display:block可以讓行內元素、行內塊元素轉化為塊狀元素

2)                       display:block可以讓隱藏的元素顯示出來

3、visibility

①    元素的隱藏   visibility: hidden;

1)        元素本身還在DOM中,只是隱藏而已

2)         元素是占位置的

②    元素的顯示  visibility: visible;

4、overflow

①     overflow: hidden;  盒子中多余的內容隱藏掉

②     overflow: scroll; 產生滾動條 :不管內容有沒有溢出都會產生滾動條

③    overflow: auto;    溢出會有滾動條,沒有溢出不會有滾動條

5、總結

   overflow:hidden 1、容器中多余的內容隱藏掉 

                                  2、清除浮動

                                 3、消除嵌套關系的外邊距合並所帶來的影響

2、溢出文字隱藏

1、word-break:自動換行

(1)     break-all:允許在單詞內換行。

(2)     keep-all:只能在半角空格或連字符處換行。

(3)     注意:主要處理英文單詞

2、一行溢出文字隱藏

(1)     white-space:nowrap   強制在同一行內顯示所有文本

(2)     overflow:hidden  多余的內容隱藏掉

(3)     text-overflow: ellipsis;  溢出的部分顯示省略號

(4)     注意:三個屬性同時使用才有效果

3、多行溢出文字隱藏

(1)    display: -webkit-box;  

(2)    -webkit-box-orient: vertical;  

(3)    -webkit-line-clamp: 行數;  

(4)     overflow: hidden;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM